如何為chart.js（條形圖）動態推送數據集？

Question

我使用chartjs（條形圖）來顯示一些數據。 我試圖動態地將數據添加到數據集數組，但它不起作用。

例如，假設我在 datasets 數組中有 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();

Fiddle - 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 示例。

Answer 3

您缺少圖表實例中的data鍵，即barChartData.data.datasets.push(e);
不需要任何方法。 js 圖表對象data.datasets鍵接受一個對象數組。 因此，在您的情況下使用：

var e = {
         fillColor : "#efefef",
         strokeColor : "#efefef",
         highlightFill: "#efefef",
         highlightStroke: "#efefef",
         data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
            }
barChartData.data.datasets[] = e; // this will append additional data to your chart
barChartData.update();

只需確保barChartData是您的 js 圖表的實例。