Chart JS 使用 addData 将标签添加到 x 轴

Question

我正在使用 Chart JS 构建一个动态折线图，并且我已经设法使将数据标签附加到 x 轴末尾的函数正常工作，如下所示：

addData gif

我想不通的是如何更改函数，而不是将它们附加到 x 轴的末尾（根据 gif），函数将数据标签添加到 x 轴的前面.本质上，在执行时，该函数会将数组中的新数据添加到 x 轴的开头，而不是按照当前函数的结尾。

代码如下：

<button id="addData">Add Data</button>

document.getElementById('addData').addEventListener('click', function() {
            if (myChart.data.datasets.length > 0) {
                var year = YEARS[myChart.data.labels.length % YEARS.length];
                myChart.data.labels.push(year);

                myChart.data.datasets.forEach(function(dataset) {
                    dataset.data.push(myChart.data.datasets.data);
                });

                myChart.update();
            }
        });

加载默认标签。

var chartData = {
  labels: ["09/10", "10/11", "11/12", "12/13", "13/14", "14/15", "15/16", "16/17", "17/18", "18/19"]

加载到第一个标签“09/10”之前添加到 x 轴的附加标签。

var YEARS = ["08/09", "07/08", "06/07", "05/06, "04/05"];

我很茫然，如有任何帮助，我们将不胜感激！

Answer 1

而不是使用 Array.push(), you should use Array.unshift() 如下：

myChart.data.labels.unshift(year);
myChart.data.datasets.forEach((dataset) => {
  dataset.data.unshift(myChart.data.datasets.data);
});

Chart JS 使用 addData 将标签添加到 x 轴

Chart JS prepend labels to x-axis with addData

javascript

arrays

linegraph

function

chart.js