时间戳

首页 > 解决方案 > 图表 JS 使用 addData 在 x 轴上添加标签

javascript - 图表 JS 使用 addData 在 x 轴上添加标签

问题描述

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

添加数据 gif

我无法弄清楚的是如何更改函数，而不是将它们附加到 x-axis 的末尾（根据 gif），该函数将数据标签添加到 x-axis 的前面。本质上，在执行时，该函数将数组中的新数据添加到 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"];

我很茫然，所以任何帮助将不胜感激！

标签： javascriptarraysfunctionchart.jslinegraph

解决方案

而不是使用Array.push()，你应该使用Array.unshift()如下：

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

推荐阅读