Apexcharts 在呈现新系列之前删除旧数据系列

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 输出，我检索数据并使用 Category paired values 方法绘制图形。下面是负责检索数据和绘制图表的代码。

获取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()在开始时只调用一次该方法（即使使用空数组它也应该工作），然后updateSeries()在 ajax 调用中调用该方法以更新图表的数据。

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
          }])

        }
      });
    }
  });
}

文件的updateSeries

Answer 2

尽管有该updateSeries功能，但您可以通过销毁以前的值来重新渲染图表的值。这适用于 ApexCharts、ChartJS 等。

var options = 
{
    series: [],
    chart: 
    {
        type: 'donut',
        height: 150
    },
    labels: ['...'],
};

// Destroy if exists in order to re-update the data
if (window.myChart)
    window.myChart.destroy();

window.myChart = new ApexCharts(chart, options);
window.myChart.render();