Chart js:更新具有两个数据集的折线图

问题描述

我想用两个数据集更新图表 js 中的折线图.我以某种方式设法清空图表，然后能够填写其中一个数据集.但无法使两个数据集都工作.这是代码.

I want to update a line chart in chart js with two data sets. I've somehow managed to empty the chart and then able to fill in one of the data set. but unable to make both data sets working. here's the code.

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();
}

推荐答案

我无法找出您的代码的问题，但是您可以参考以下更新图表的方法，该方法与您尝试过的非常相似，但是这是有效的.您也可以参考小提琴 -> http://jsfiddle.net/cuzx3L7j/4/

I am not able to find out the issue with your code, but you can refer the below way of updating charts which is very similar to what you have tried but this is working. You can refer the fiddle also -> 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();

}

这篇关于Chart js:更新具有两个数据集的折线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！