添加数据集条形图 - Chart.JS答案

【问题标题】：Add DataSet Bar Chart - Chart.JS添加数据集条形图 - Chart.JS
【发布时间】：2026-01-10 21:20:03
【问题描述】：

我正在尝试在 chart.js 中制作条形图（使用 chart.js 2.2.2）

我在尝试将新数据集放入图表时遇到了麻烦

我怎样才能放置一个新的数据集“Vendas”，其中包含数据：[10,20,30,40,50,60,70]

var data = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                label: "Compras",
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1,
                data: [65, 59, 80, 81, 56, 55, 40],
            }
        ]
    };
var ctx = $("#barOrgaoAno").get(0).getContext("2d");
        var myBarChart = new Chart(ctx,{
            type: "bar",
            data: data,
});

我尝试了两个我在互联网上得到的例子，但我都无法工作

示例 1

barChartDemo.addData([dData()], "dD " + index);

示例2

JSFLiddle

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

【问题讨论】：

要在开头包含 Vendas 集还是在后面添加？
将在标签一月有 2 条，一个用于“Compras”，一个用于“Vendas”，依此类推，不管是在之前还是之后添加

标签： dataset bar-chart chart.js

【解决方案1】：

由于您将图表数据存储在一个变量中（在您的代码中称为data），您可以通过按钮上的一个简单函数来完成：

$('button').click(function() {
    // You create the new dataset `Vendas` with new data and color to differentiate
    var newDataset = {
        label: "Vendas",
        backgroundColor: 'rgba(99, 255, 132, 0.2)',
        borderColor: 'rgba(99, 255, 132, 1)',
        borderWidth: 1,
        data: [10, 20, 30, 40, 50, 60, 70],
    }

    // You add the newly created dataset to the list of `data`
    data.datasets.push(newDataset);

    // You update the chart to take into account the new dataset
    myBarChart.update();
});

你可以看到完整的代码on this jsFiddle，点击后的结果如下：

【讨论】：

注意：这里的data变量可以用myBarChart.data代替，效果一样。（只是提到，因为乍一看我没有意识到data 是什么，必须阅读 OP 才能找到）

【解决方案2】：

仅基于 tektiv 的回答，它对我不起作用。我按照他的建议构建了 newDataSet，但是在推送数据时遇到了问题。为了解决这个问题，我必须这样做：

data.config.data.datasets.push(newDataSet);

代替：

data.datasets.push(newDataSet);

【讨论】：