Диаграмма JS с добавлением меток к оси x с помощью addData - PullRequest
Новая
       111

Диаграмма JS с добавлением меток к оси x с помощью addData

0 голосов
/ 01 мая 2020

Я строю динамическую c линейную диаграмму, используя Диаграмму JS, и мне удалось заставить работать функцию, которая добавляет метки данных в конец оси X, как это:

addData 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"]

Дополнительные метки, добавляемые к оси x, перед меткой кулачка при нагрузке, которая равна "09/10". 

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

Я в растерянности, поэтому любая помощь будет принята с благодарностью!

1 Ответ

0 голосов
/ 01 мая 2020

Вместо использования Array.push() следует использовать Array.unshift() следующим образом: 

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