Question

我正在使用顶点图表从json输出进行简单的数据可视化。我的图表基于纯JavaScript，而不基于Vue或其他框架。

我的json（php）后端通过绘制如下图创建两个json输出

JSON 1

{
    "x": "2019-05-27 16:18:48",
    "y": "100"
},
{
    "x": "2019-05-27 16:25:09",
    "y": "110"
},

JSON 2

{
        "x": "2019-05-27 16:18:48",
        "y": "60"
    },
    {
        "x": "2019-05-27 16:25:09",
        "y": "65"
    },

基于以上两个json输出，我检索数据并使用“类别配对值”方法绘制图形。下面是负责检索数据和绘制图表的代码。

获取json数据的功能

function data_function(){
            $.ajax({
                type: "Get",
                    url: backend,
                    data:{
                        param: "all_a"
                    },
                    async: true,
                    cache: false,
                    success: function(data) {
                        a_data = data;

                        $.ajax({
                        apex_task: "Get",
                            url: backend,
                            data:{
                                param: "all_b"
                            },
                            async: true,
                            cache: false,
                            success: function(data) {
                                    b_data = data;
                                    chart(a_data,b_data);

                            }
                        });
                    }
            });
}

绘制图表的功能

function draw_chart(a_data,b_data) {               
    var options = {

            chart: {
            height: 400,
            type: 'bar',
            stacked: false
            },
            series: [
            {
                name: 'a',
                data: a_data, 
            },

            {
                name: 'b',
                data: b_data, 
            }],

            yaxis: [
             {
                axisTicks: {
                show: true,
                },
                axisBorder: {
                show: true,
                color: '#008FFB'
                },
                labels: {
                style: {
                    color: '#008FFB',
                }
                }

                    },
            ]
    }

    var chart = new ApexCharts(document.querySelector("#chartdiv"), options);
    chart.render(); 
}

这很好，直到我第二次用新数据渲染图表。当我加载不同的数据而不重新加载Windows图表时，它们会变得很滞后，并使用旧的不正确数据多次渲染。有时我必须多次运行data_fnction才能正确显示图表。

我该如何解决？我是否需要使用诸如appendchart之类的功能？如何使用data_function

Answer 1

您应该只在开始时调用一次render()方法（即使使用空数组也可以），然后在ajax调用中调用updateSeries()方法以更新图表数据。

var options = {
  chart: {
    height: 400,
    type: 'bar',
    stacked: false
  },
  series: [],
  yaxis: [{
    axisTicks: {
      show: true,
    },
    axisBorder: {
      show: true,
      color: '#008FFB'
    },
    labels: {
      style: {
        color: '#008FFB',
      }
    }
  }]
}

var chart = new ApexCharts(document.querySelector("#chartdiv"), options);
chart.render();

使用图表的updateSeries方法调用ajax

function data_function() {
  $.ajax({
    type: "Get",
    url: backend,
    data: {
      param: "all_a"
    },
    async: true,
    cache: false,
    success: function (data) {
      a_data = data;

      $.ajax({
        apex_task: "Get",
        url: backend,
        data: {
          param: "all_b"
        },
        async: true,
        cache: false,
        success: function (data) {
          b_data = data;

          chart.updateSeries([{
            name: 'a',
            data: a_data
          }, {
            name: 'b',
            data: b_data
          }])

        }
      });
    }
  });
}

Docs for updateSeries

尖峰图表会在呈现新系列之前删除旧数据系列

1 个答案: