Skip to content

使用chart.source或者chart.changeData更新数据,tooltip的显示问题 #271

Closed
@LwcReber

Description

  • F2 Version:3.2.0-beta.x
  • Platform:微信小程序
  • Mini Showcase(like screenshots): 无
  • CodePen Link:无

直接使用文档中提到的chart.source或者chart.changeData来更新表格数据时,tooltip有问题。使用chart.source来更新数据,tooltip会一直显示,并且数据显示的内容也是更新前的内容。使用changeData这种方式来更新数据时,tooltip可以隐藏,但是,这个时候再去点击已经隐藏的那一列时,无法显示tooltip,必须点击其他的列才会显示tooltip。这两个更新的方法,不太明确要使用哪个。

以下是小程序的线上demo 里charts/bar文件夹的js代码

import F2 from '../../../f2-canvas/lib/f2';

let chart = null;

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

var Global = F2.Global;

chart.source(data, {
population: {
tickCount: 5
}
});
chart.coord({
transposed: true
});
chart.axis('country', {
line: Global._defaultAxis.line,
grid: null
});
chart.axis('population', {
line: null,
grid: Global._defaultAxis.grid,
label: function label(text, index, total) {
var textCfg = {};
if (index === 0) {
textCfg.textAlign = 'left';
} else if (index === total - 1) {
textCfg.textAlign = 'right';
}
return textCfg;
}
});
chart.interval().position('country*population');
chart.render();
return chart;
}

Page({
onShareAppMessage: function (res) {
return {
title: 'F2 微信小程序图表组件,你值得拥有~',
path: '/pages/index/index',
success: function () { },
fail: function () { }
}
},
data: {
opts: {
lazyLoad: true
}
},
// 按钮一点击切换数据
update () {
chart.source([
{ country: '巴西', population: 150 },
{ country: '印尼', population: 234 },
{ country: '美国', population: 290 },
{ country: '印度', population: 104 },
{ country: '中国', population: 131 }
])
chart.render()
},
// 按钮二点击切换数据
update2 () {
chart.source([
{ country: '巴西', population: 100 },
{ country: '印尼', population: 230},
{ country: '美国', population: 190 },
{ country: '印度', population: 200 },
{ country: '中国', population: 230 }
])
chart.render()
},
onReady() {
this.pieComponent = this.selectComponent('#bar-dom');
this.pieComponent.init((canvas, width, height) => {
initChart(canvas, width, height, [
{ country: '巴西', population: 100 },
{ country: '印尼', population: 234 },
{ country: '美国', population: 290 },
{ country: '印度', population: 104 },
{ country: '中国', population: 131 }
])
})
}
});

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions