Javascript 如何为chart.js（条形图）动态推送数据集？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31059399/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to push datasets dynamically for chart.js (bar chart)?
提问by Liel Feldman
Im using chartjs (bar chart) to display some data. Im trying to dynamically add data to datasetsarray but its not working.
我使用chartjs（条形图）来显示一些数据。我试图动态地将数据添加到数据集数组，但它不起作用。
for example, lets say I have 2 objects in datasets array, and I dynamically creating this object and trying to push him into datasets (from Chrome console) after the page loaded and chart is already up.
例如，假设我在 datasets 数组中有 2 个对象，我动态创建这个对象并尝试在页面加载和图表已经启动后将他推送到数据集（从 Chrome 控制台）。
var e = {
fillColor : "#efefef",
strokeColor : "#efefef",
highlightFill: "#efefef",
highlightStroke: "#efefef",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
and then
进而
barChartData.datasets.push(e)
I also tried to do window.myBar.update()but again nothing happend.
我也尝试过，window.myBar.update()但同样什么也没发生。
Do you know this issue? Thanks,
你知道这个问题吗？谢谢，
采纳答案by potatopeelings
I don't think you can use addData to add a series - it's for adding points / bars to existing series.
我认为您不能使用 addData 添加系列 - 它用于向现有系列添加点/条。
However you can insert your new series directly into the chart object. With the chart object and new dataset like so
但是，您可以将新系列直接插入到图表对象中。使用图表对象和新数据集
var ctx = document.getElementById("chart").getContext("2d");
var myBarChart = new Chart(ctx).Bar(data);
var myNewDataset = {
label: "My Second dataset",
fillColor: "rgba(187,205,151,0.5)",
strokeColor: "rgba(187,205,151,0.8)",
highlightFill: "rgba(187,205,151,0.75)",
highlightStroke: "rgba(187,205,151,1)",
data: [48, 40, 19, 86, 27, 90, 28]
}
the code to insert a new dataset would be
插入新数据集的代码是
var bars = []
myNewDataset.data.forEach(function (value, i) {
bars.push(new myBarChart.BarClass({
value: value,
label: myBarChart.datasets[0].bars[i].label,
x: myBarChart.scale.calculateBarX(myBarChart.datasets.length + 1, myBarChart.datasets.length, i),
y: myBarChart.scale.endPoint,
width: myBarChart.scale.calculateBarWidth(myBarChart.datasets.length + 1),
base: myBarChart.scale.endPoint,
strokeColor: myNewDataset.strokeColor,
fillColor: myNewDataset.fillColor
}))
})
myBarChart.datasets.push({
bars: bars
})
myBarChart.update();
Fiddle - http://jsfiddle.net/pvak6rkx/(inserts the new dataset after 3 seconds)
Fiddle - http://jsfiddle.net/pvak6rkx/（3秒后插入新数据集）
回答by Felix Livni
In version 2.x, you can add (or remove) data to the chart directly and then call update(), e.g.
在 2.x 版本中，您可以直接向图表添加（或删除）数据，然后调用update()，例如
barChart.data.datasets.push({
label: 'label2',
backgroundColor: '#ff0000',
data: [1,2,3]
});
barChart.update();
Here's a jsfiddle example.
这是一个jsfiddle 示例。
