使用 Chart.js 更新折线图时如何设置 global/specific 属性？

Question

感谢@potatopeelings 的帮助，我现在可以将属性 highlightFill 设置为我所有的 datasets，即使我 show/hide图形。我补充说：

currentChart.datasets[0].points[8].highlightStroke = "rgba(220,0,0,1)";
currentChart.datasets[1].points[8].highlightStroke = "rgba(0,255,0,1)";
currentChart.datasets[2].points[8].highlightStroke = "rgba(0,0,255,1)";

但我得到的，但我不想要的是，当我隐藏一个系列时，在 2 次迭代后它开始绘制隐藏数据并停止删除第一个系列的数据。我怎样才能设置特定于系列的属性，例如 highlightStroke，而没有所描述的副作用？

Answer 1

与其将数据集属性设置为空对象，不如根本不将其包含在数据集中。所以

data = {
    labels: chartlabel,
    datasets: [SP, NC, SPA]
};

变成

data = {
    labels: chartlabel,
    datasets: []
};

if (SP.label !== undefined) data.datasets.push(SP)
if (NC.label !== undefined) data.datasets.push(NC)
if (SPA.label !== undefined) data.datasets.push(SPA)

在 2 个地方

用循环替换数据插入、点属性设置（而不是为 3 个数据集硬编码）。所以

setInterval(function() {
    currentChart.addData([randomScalingFactor(), randomScalingFactor(), randomScalingFactor()], ++latestLabel);
currentChart.datasets[0].points[8].highlightStroke = "rgba(220,0,0,1)";
currentChart.datasets[1].points[8].highlightStroke = "rgba(0,255,0,1)";
currentChart.datasets[2].points[8].highlightStroke = "rgba(0,0,255,1)";

变成

var d = []
currentChart.datasets.forEach(function(e) {
    d.push(randomScalingFactor())
})
currentChart.addData(d, ++latestLabel);
currentChart.datasets.forEach(function(dataset) {
    dataset.points[8].highlightStroke = dataset.points[0].highlightStroke;
})

新点的 highlightStroke 是从同一系列的第一个点的 highlightStroke 复制的。

Fiddle - http://jsfiddle.net/zs99pw4L/

Answer 2

currentChart2.datasets.forEach(function(e) {
    e.points[e.points.length - 1].highlightFill=e.points[0].highlightFill;
    e.points[e.points.length - 1].highlightStroke=e.points[0].highlightStroke;
});

问题也解决了。 http://jsfiddle.net/co3L0bdb/5/

使用 Chart.js 更新折线图时如何设置 global/specific 属性？

How to set global/specific properies when updating line-chart using Chart.js?

linechart

chart.js