Skip to content
New issue

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

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

Already on GitHub? Sign in 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 脚本即可。这周五之前会发布稳定版本的

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

No branches or pull requests

2 participants