现在是时候编写代码来为我们的图表删除与添加柱形了。开始时我们初始化 index 的值为 11，我使用了两个方法：removeData() 和 addData(valuesArray,label)。调用实例的 removeData() 方法删除图表所有数据集的第一个值。在 barChartDemo 这个例子中，数据集的第一个值被移除了。调用 addData() 顺着标签传递一个数组值，在图表的最后增加一个新的数据节点。下面的代码片段每 3 秒钟会更新一次图表。
JavaScript
var index = 11; var ctx = document.getElementById('canvas').getContext('2d'); var barDemo = new Chart(ctx).Bar(barData, { responsive: true }); setInterval(function() { barDemo.removeData(); barDemo.addData([dData()], 'dD ' + index); index++; }, 3000);
另一个更新图表数值的方法是直接设置数值。在下面的例子中，第一行是将第一个数据集的第二个柱形的数值设为 60。如果你在这时更新，柱形会通过动画将其当前值变为 60。
JavaScript
barDemo.datasets[0].bars[2].value = 60; barDemo.update();
这里是柱形图的示例（由SitePoint在CodePen上创建）：
See the Pen Chart.js Responsive Bar Chart Demo by SitePoint (@SitePoint) on CodePen.
结论
这个教程覆盖了关于 Chart.js 的一些重要功能。第一个例子展示了一些全局设置的使用，同时，Chart.js也为每个图表类型提供了专属的自定义设置。如果当前可用的图表无法满足你的需求，你还可以创造自己的图表类型。我推荐你浏览文档，加深关于该库什么可以做，什么无法做的认识。
您可能感兴趣的文章: