我使用chartjs创建了一个基本条形图,它工作正常 . 现在我想基于时间间隔更新值 . 我的问题是,在创建图表后,我不知道如何正确更新其值...
我的代码:
var ctx = $("#myChart").get(0).getContext("2d");
var dts = [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
data: [0, 0, 0, 0, 0]
}
];
var data = {
labels: ["Core#1", "Core#2", "Core#3", "Core#4", "Total"],
datasets: dts
};
var chart = new Chart(ctx);
chart.Bar(data);
//test code
setInterval( function () {
data.datasets[0].data = [random(), random(), random(), random(), random()];
chart.Bar(data);
},2000);
在测试代码中,我用 datasets[0].data
更新值 - 这是正确的方法吗?这个问题是,每当我调用 chart.Bar()
时,值都会重置为0然后设置为随机值(就像我正在重新创建图表一样) . 这样,所有动画总是从0到值,看起来很奇怪 . 我希望如果我将值从50更新为10,则条形图将从50下降到10并且不会设置为0然后动画为10 .
我没有在文档中找到任何关于此的内容......我做错了什么或者这个库是不可能的?
10 回答
如果destroy()和clear()不起作用(就像我的经验)你可以使用jquery删除画布并再次追加它 .
Update: 看起来charjs已经更新(见下面的评论) . 有一些例子看起来非常好:
以下是使用新数据更新折线图的示例:http://jsbin.com/yitep/5/edit
以下是我们如何更新折线图上的现有数据:http://jsbin.com/yitep/4/edit
Original Post
截至2013年11月,似乎很少有更新图表的选项 .
有一个good example here(下面重复)向折线图添加新点 . 仍然有点跳跃但不是太糟糕 . 但是,我认为效果可能取决于您使用的图表 .
它确实看起来像是在开发流程中的某个地方 . 我没有看到任何发布日期的迹象:https://github.com/nnnick/Chart.js/issues/13
JS
HTML
根据文档,现在有一个
update()
方法将重新绘制图表 .在Chart实例上调用update()将使用任何更新的值重新渲染图表,允许您编辑多个现有点的值,然后在一个动画渲染循环中渲染它们 .
以下是如何在ChartJs的最后一个版本中执行此操作:
看看这个clear video
或在jsfiddle测试
你也可以使用destroy()函数 . 像这样
删除画布dom并再次添加 .
您只需要更改
chartObject.data.datasets
值并像这样调用update()
:我认为现在不可能 .
然而,正如作者在此暗示的那样,这应该很快就会出现:https://github.com/nnnick/Chart.js/issues/161#issuecomment-20487775
最简单的方法是替换canvas元素,然后再次调用new Chart():
当然,您必须使用初始化Chart.js所需的正确值替换yourChartData,yourChartType和yourChartOptions . 见Chart.js Docs .
您可以通过单击按钮或任何其他需要的事件来调用reloadMyChart函数 . 您可能会向此函数添加参数并使用这些参数进行REST调用以动态更新图表,如下所示:
希望能帮助到你! =)
这么简单,只需替换图表canvas元素即可 .