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

Question

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

18713419413 opened this issue 4 years ago · comments

18713419413 commented 4 years ago

这是我的需求图片链接
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

这是代码
 <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 依赖

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() {}
});`

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

彭昭 · Answer 1 · Thu Sep 23 2021 14:27:36 GMT+0800 (China Standard Time)

完成了吗？

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

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