4

我正在使用顶点图表从 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

4

1 回答 1

7

您应该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

于 2019-05-29T10:12:45.893 回答