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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图表js:更新具有两个数据集的折线图相关的知识,希望对你有一定的参考价值。

我想用两个数据集更新图表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();
}
答案

我无法找到您的代码的问题,但您可以参考以下更新图表的方式,这与您尝试过的非常相似,但这是有效的。您也可以参考小提琴 - > 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();

}

以上是关于图表js:更新具有两个数据集的折线图的主要内容,如果未能解决你的问题,请参考以下文章

chart.js 折线图不显示超过图表中某个点的线

echarts怎么做实时动态的折线图

echarts怎么做实时动态的折线图

论文中的折线图怎么画?

Plotly Dash:图表未根据下拉选择更新

如何使用websocket在网页上动态示实时数据的折线图