如何为chart.js(条形图)动态推送数据集？

Question

我使用chartjs(条形图)来显示一些数据.我试图动态地将数据添加到数据集阵列,但它无法正常工作.

例如,假设我在数据集数组中有2个对象,并且在页面加载和图表已经启动后,我动态创建此对象并尝试将其推送到数据集(来自Chrome控制台).

var e = {
                fillColor : "#efefef",
                strokeColor : "#efefef",
                highlightFill: "#efefef",
                highlightStroke: "#efefef",
                data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
            }

然后

barChartData.datasets.push(e)

我也尝试过,window.myBar.update() 但没有任何事情发生.

你知道这个问题吗？谢谢,

Answer 1

我不认为你可以使用addData添加一个系列 - 它是为现有系列添加点/条.

但是,您可以将新系列直接插入图表对象.使用图表对象和新数据集就像这样

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]
}

插入新数据集的代码将是

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();

小提琴 - http://jsfiddle.net/pvak6rkx/(3秒后插入新数据集)

Answer 2

在版本2.x中,您可以直接向图表添加(或删除)数据,然后调用update(),例如

barChart.data.datasets.push({
  label: 'label2',
  backgroundColor: '#ff0000',
  data: [1,2,3]
});
barChart.update();

这是一个jsfiddle例子.