Chart.js 2.0 中的添加数据

Question

我正在尝试使用 Chart.js 2.0 创建一个双 Y 轴。我在文档中看到 AddData 的工作方式与 Chart.js 1.0 相同。但是当我在浏览器上运行时，我收到消息“xxxxxxxx.AddData 不是函数”。

如果有帮助，这就是我正在使用的原因https://jsfiddle.net/96u30Lht/ （我在我的 fiddle 中找不到 url 到 chart.js 2 库作为资源文件，这应该是 canvas 保持黑色的原因）

Answer 1

我正在使用来自 dev 分支的 v2.0.0（文件头显示为 2.0.0-alpha，我正在查看的文件是 https://github.com/nnnick/Chart.js/blob/f3eb6f4a433b4f34a582842dcf7b42f710861a7d/Chart.js）

您需要进行一些更改才能使 fiddle 正常工作

使图表类型成为一个选项

我认为 v2.0 对于所有图表类型只有一个构造函数。所以

chartdata = new Chart(ctx).Line({

应该是

chartdata = new Chart(ctx, {
    type: "line",

为第二个 y 轴添加类型

scaleType: "linear"

到

type: "linear",

type 是属性名称。它不会对第一个 y 轴造成任何问题，因为它在那里是可选的（你的 scaleType: "linear" 在第一个实例中实际上没有做任何事情，你可以放弃它）

去掉window.onload

您的 fiddle 已经设置为执行 onLoad

更改方法签名

据我从代码中看到的，addData 的方法签名已更改。现在如下（来自代码）- 请注意，这可能随时更改

// Add data to the given dataset
// @param data: the data to add
// @param {Number} datasetIndex : the index of the dataset to add to
// @param {Number} index : the index of the data
addData: function addData(data, datasetIndex, index)

所以你的 setInterval 的更好版本是

setInterval(function () {
    var latestlabel = chartlabel[6];

    chartdata.addData(12, 0, latestlabel);
    chartdata.addData(5, 1, latestlabel);
    chartdata.removeData(0, 0);
    chartdata.removeData(1, 0);

}, 7000);

https://jsfiddle.net/bsgc9tu7/

Chart.js 2.0 中的添加数据

AddData in Chart.js 2.0

javascript

chart.js