如何使echarts的折线图x轴隔两个数据进行显示

Posted 2023-04-21

参考技术A 1、创建折线图的数据区（包括年份和数据）2、仅选择数据区创建折线图（插入选项卡/图表工具组/折线图）3、得到的折线图x坐标不满足要求，在图表区单击鼠标右键，选择“选择数据”，进入“选择数据源”对话框4、单击对话框右侧“水平分类轴标签”下的“编辑”按钮5、选择对应x坐标轴的年份区域6、单击确定可见年份数据更改了图表的x轴坐标系列本回答被提问者采纳

图表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();

}