javascript - Chart.js 2.0 中的添加数据

Question

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

如果可以帮助的话，这就是我正在使用的情况 https://jsfiddle.net/96u30Lht/ (我在我的 fiddle 中找不到 Chart.js 2 lib 的 url 作为资源文件，这应该是 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/