Диаграмма js: обновить линейную диаграмму, имеющую два набора данных - PullRequest
0 голосов
/ 25 октября 2018

Я хочу обновить линейную диаграмму в диаграмме js двумя наборами данных.Мне как-то удалось очистить график и затем заполнить один из набора данных.но не может заставить работать оба набора данных.вот код.

ajaxRequest(
    {
        url: 'reports/updateChart/?filter=true',
        method: 'post',
        data: data
    }, function (response)
        {
            /*refresh the tables with the new data sets*/
            removeData(myChart);
            let label = [1, 234, 234, 234, 234, 234, 234, 34, 234, 23, 23, 41, 3, 2, 4];
            let data = [234, 234, 5, 23, 34, 234, 234, 234],[22, 1, 123, 14, 2]
        }; addData(myChart, label, data);
    });

});

функции:

function removeData(chart) {
    chart.data.labels = [];
    chart.data.datasets.forEach((dataset) => {
        dataset.data = [];
    });
    chart.update();
}

function addData(chart, label, data) {
    $.each(label, function (index, value) {
        chart.data.labels.push(value);
    });

    chart.data.datasets.forEach((dataset) => {
        $.each(data, function (index, value) {
            dataset.data.push(value);
        });
    });
    chart.update();
}

1 Ответ

0 голосов
/ 26 октября 2018

Я не могу выяснить проблему с вашим кодом, но вы можете воспользоваться приведенным ниже способом обновления диаграмм, который очень похож на то, что вы пробовали, но это работает.Вы можете также обратиться к скрипке -> http://jsfiddle.net/cuzx3L7j/4/

Надеюсь, это поможет!

function clearAndAddNewDataSets() {
  myChart.config.data.datasets = [];
  myChart.config.data.labels = [];

  var labels = ['Label1', 'Label2', 'Label3', 'Label4', 'Label5', 'Label6', 'Label8', 'Label8'];
  var data = [
    [234, 234, 5, 23, 34, 234, 234, 234],
    [22, 1, 123, 14, 2]
  ]

  var colors = ['Red', 'Green'];

  myChart.config.data.labels = labels;

  for (i = 0; i < data.length; i++) {
    var dataSet = {
      label: 'testLabel' + i,
      data: data[i],
      backgroundColor: colors[i]
    }

    myChart.config.data.datasets.push(dataSet);
  }

  myChart.update();

}
...