Question

你好，我在 js 世界中很新。我在 chart.js 中遇到堆叠条形图的问题。问题是，如何迭代数据集？

我对图表进行了硬编码并且它可以工作，但是如果期货有任何变化，我就搞砸了。我已经尝试过 for 循环，但没有任何效果。

我也添加了此功能，但我不确定在图表中的何处调用它。

非常感谢您的帮助！！！！

function updateChart() {
    for (let index = 0; index < data.generation.length; index++) {
        chart.data.datasets[index].label = data.genration[index];
        chart.data.datasets[index].backgroundColor = colors[index];
        chart.data.datasets[index].data = data.quantity[index];
    }
    chart.update();
};

代码如下：

<script>

var 颜色 = ['#8CA6B3'、'#87C488'、'#AA641E'、'#D7CBBD'、'#284651'、'#C1893F'、'#AF8F90'、'#69454F'、'#A8DFF1 ', '#085438'];

$(function () {
    var $ppChart = $("#data_pp");
    $.ajax({
        url: $ppChart.data("url"),
        success: function (data) {
            var ctx = $ppChart[0].getContext("2d");
            var chart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: data.month,
                    datasets: [{
                        label: data.generation[0],
                        backgroundColor: colors[0],
                        data: data.quantity[0],
                    }, 
                    {
                        label: data.generation[1],
                        backgroundColor: colors[1],
                        data: data.quantity[1],
                    }, 
                    {
                        label: data.generation[2],
                        backgroundColor: colors[2],
                        data: data.quantity[2],
                    }, 
                    {
                        label: data.generation[3],
                        backgroundColor: colors[3],
                        data: data.quantity[3],
                    },
                    {
                        label: data.generation[4],
                        backgroundColor: colors[4],
                        data: data.quantity[4],
                    },
                    {
                        label: data.generation[5],
                        backgroundColor: colors[5],
                        data: data.quantity[5],
                    },
                    {
                        label: data.generation[6],
                        backgroundColor: colors[6],
                        data: data.quantity[6],
                    },
                    {
                        label: data.generation[7],
                        backgroundColor: colors[7],
                        data: data.quantity[7],
                    },
                    {
                        label: data.generation[8],
                        backgroundColor: colors[8],
                        data: data.quantity[8],
                    },
                    {
                        label: data.generation[9],
                        backgroundColor: colors[9],
                        data: data.quantity[9],
                    },
                    {
                        label: data.generation[10],
                        backgroundColor: colors[10],
                        data: data.quantity[10],
                    }
                    ]
                },
                options: {
                    scales: {
                        xAxes: [{
                            stacked: true
                        }],
                        yAxes: [{
                            stacked: true
                        }]
                    },
                    responsive: true,
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                    }
                }
            });

        }
    });
});

 function updateChart() {
    for (let index = 0; index < data.generation.length; index++) {
        chart.data.datasets[index].label = data.generation[index];
        chart.data.datasets[index].backgroundColor = colors[index];
        chart.data.datasets[index].data = data.quantity[index];
    }
    chart.update();
};

Answer 1

不要只调用新图表，而是将其放入变量中：

var chart = new Chart();

然后您可以像这样访问图表变量中的所有数据集：chart.data.datasets。这将提供一个数组，其中包含您可以循环遍历的图表中的所有数据集

Chart.js 堆积条形图迭代数据集

1 个答案: