小姐姐 请问 在微信小程序中使用wx-f2 如何在 chart.tooltip中的 onchange或者onShow里将点击的数据拿出来渲染到页面上

[18713419413]

这是我的代码 按着demo写的 `

这里展示chart.tooltip中的 onchange或者onShow 里获取到的数据

// index.js // 获取应用实例 const app = getApp() // import F2 from '@antv/wx-f2'; // 注：也可以不引入， initChart 方法已经将 F2 传入，如果需要引入，注意需要安装 @antv/wx-f2 依赖

var chart = null; var time=1; var data = [{ "type": "a", "minHeart": 0, "maxHeart": 0, "minBreath": 0, "maxBreath": 0, "time1": "10时", "time": "2021-01-08 10:00:00" }, { "type": "a", "minHeart": 0, "maxHeart": 0, "minBreath": 0, "maxBreath": 0, "time1": "11时", "time": "2021-01-08 11:00:00" }, { "type": "a", "minHeart": 0, "maxHeart": 0, "minBreath": 0, "maxBreath": 0, "time1": "12时", "time": "2021-01-08 12:00:00" }, { "type": "a", "minHeart": 0, "maxHeart": 0, "minBreath": 0, "maxBreath": 0, "time1": "13时", "time": "2021-01-08 13:00:00" }, { "type": "a", "minHeart": 0, "maxHeart": 0, "minBreath": 0, "maxBreath": 0, "time1": "14时", "time": "2021-01-08 14:00:00" }, { "type": "a", "minHeart": 47, "maxHeart": 58, "minBreath": 15, "maxBreath": 15, "time1": "15时", "time": "2021-01-08 15:00:00" }, { "type": "a", "minHeart": 44, "maxHeart": 87, "minBreath": 6, "maxBreath": 23, "time1": "16时", "time": "2021-01-08 16:00:00" }, { "type": "a", "minHeart": 42, "maxHeart": 83, "minBreath": 0, "maxBreath": 35, "time1": "17时", "time": "2021-01-08 17:00:00" }, { "type": "a", "minHeart": "48", "maxHeart": "87", "minBreath": 0, "maxBreath": 35, "time1": "18时", "time": "2021-01-08 18:00:00" }, { "type": "a", "minHeart": 46, "maxHeart": 93, "minBreath": 6, "maxBreath": 23, "time1": "19时", "time": "2021-01-08 19:00:00" }, { "type": "a", "minHeart": 42, "maxHeart": 89, "minBreath": 6, "maxBreath": 24, "time1": "20时", "time": "2021-01-08 20:00:00" }, { "type": "a", "minHeart": 50, "maxHeart": 87, "minBreath": 0, "maxBreath": 24, "time1": "21时", "time": "2021-01-08 21:00:00" }, { "type": "a", "minHeart": 48, "maxHeart": 89, "minBreath": 0, "maxBreath": 35, "time1": "22时", "time": "2021-01-08 22:00:00" }, { "type": "a", "minHeart": 22, "maxHeart": 85, "minBreath": 0, "maxBreath": 23, "time1": "23时", "time": "2021-01-08 23:00:00" }, { "type": "a", "minHeart": 42, "maxHeart": 85, "minBreath": 0, "maxBreath": 35, "time1": "00时", "time": "2021-01-09 00:00:00" }, { "type": "a", "minHeart": 46, "maxHeart": 83, "minBreath": 0, "maxBreath": 31, "time1": "01时", "time": "2021-01-09 01:00:00" }, { "type": "a", "minHeart": 43, "maxHeart": 79, "minBreath": 0, "maxBreath": 34, "time1": "02时", "time": "2021-01-09 02:00:00" }, { "type": "a", "minHeart": 38, "maxHeart": 75, "minBreath": 0, "maxBreath": 34, "time1": "03时", "time": "2021-01-09 03:00:00" }, { "type": "a", "minHeart": 42, "maxHeart": 83, "minBreath": 0, "maxBreath": 35, "time1": "04时", "time": "2021-01-09 04:00:00" }, { "type": "a", "minHeart": 41, "maxHeart": 77, "minBreath": 7, "maxBreath": 19, "time1": "05时", "time": "2021-01-09 05:00:00" }, { "type": "a", "minHeart": 0, "maxHeart": 0, "minBreath": 0, "maxBreath": 0, "time1": "06时", "time": "2021-01-09 06:00:00" }, { "type": "a", "minHeart": 0, "maxHeart": 0, "minBreath": 0, "maxBreath": 0, "time1": "07时", "time": "2021-01-09 07:00:00" }, { "type": "a", "minHeart": 0, "maxHeart": 0, "minBreath": 0, "maxBreath": 0, "time1": "08时", "time": "2021-01-09 08:00:00" }, { "type": "a", "minHeart": 0, "maxHeart": 0, "minBreath": 0, "maxBreath": 0, "time1": "09时", "time": "2021-01-09 09:00:00" }];

function initChart(canvas, width, height, F2) { // 使用 F2 绘制图表 const originDates = []; data.forEach(obj => { var objs = { time: obj.time1, type: obj.type, Heart: [obj.minHeart, obj.maxHeart] }; originDates.push(objs);

});

chart = new F2.Chart({ el: canvas, width, height, });

chart.source(originDates, { time: { tickCount: 7 }, Heart: { tickCount: 7 },

}); // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴 chart.tooltip({ custom: true, // 自定义 tooltip 内容框 // showXTip: true, onChange(obj) { //在这里将我点击的这条数据拿出来 保存在 data中 渲染到 页面上 console.log(obj,"239") }, onShow(ev) { console.log(ev) } }); // l(90) 0:#F5BB3C 1:#FFAA4E chart.interval().position('time*Heart').color('l(90) 0:#F5BB3C 1:#FFAA4E').adjust({ type: 'dodge', marginRatio: 0.3 }).style("type", { radius: function radius() { return [4, 4, 4, 4]; } }); chart.render(); return chart; }

Page({ data: { opts: { onInit: initChart }, time: 0 }, onLoad() {

}, bintopSho() {

console.log(chart,"274")
// chart.changeData(data);

}, onReady() {} });`