请问 我使用图表 能将头部设置成这种样子吗? 或者说将chart.tooltip里面的 onChange回调方法中获取到的数据 在点击柱状图的时候显示在页面上

[18713419413]

这是我的需求 图片链接
http://a1.qpic.cn/psc?/V13ctfOc0xxFZI/ruAMsa53pVQWN7FLK88i5ls9J2OTtxm3BPXEBO1RtA2N7m79IDta3bDKQBR70QYWM9evd.kSux.RnrGlQcMTHCHmxn*AjsMDKongOES121I!/c&ek=1&kp=1&pt=0&bo=kQEzAQAAAAABF5I!&tl=3&vuin=1135853548&tm=1610211600&sce=60-2-2&rf=0-0

这是代码
<!--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) {
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() {}
});`

其他功能都实现了 就差这里 求大佬告知 拜托了

[PengZhao12]

完成了吗？