Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

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

Closed
LwcReber opened this issue Aug 22, 2018 · 3 comments
Closed
Assignees
Labels
Milestone

Comments

@LwcReber
Copy link

  • 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 }
])
})
}
});

@simaQ simaQ self-assigned this Aug 23, 2018
@simaQ simaQ added the bug label Aug 23, 2018
@simaQ
Copy link
Contributor

simaQ commented Aug 23, 2018

这个是个 bug,稍等我修复一下,更新数据直接调用即可。

chart.changeData([
{ country: '巴西', population: 100 },
{ country: '印尼', population: 230},
{ country: '美国', population: 190 },
{ country: '印度', population: 200 },
{ country: '中国', population: 230 }
])

@LwcReber
Copy link
Author

好的非常感谢

@simaQ simaQ closed this as completed in 297ae47 Aug 23, 2018
@simaQ simaQ added this to the 3.2.1 milestone Aug 23, 2018
@simaQ
Copy link
Contributor

simaQ commented Aug 23, 2018

你好,问题已经修复,请使用 3.2.1-beta.3 版本的 F2, https://unpkg.com/@antv/f2@3.2.1-beta.3/dist/ 这里选择你需要的 F2 脚本即可。这周五之前会发布稳定版本的

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants