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

[18713419413]

这是我的代码 按着demo写的
<!--index.wxml--> <view class="container"> <view>这里展示chart.tooltip中的 onchange或者onShow 里获取到的数据</view> <ff-canvas id="column-dom" canvas-id="column" opts="{{ opts }}"></ff-canvas> </view>
`// 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() {}
});`