javascript - Highcharts ajax 不工作

Question

我发现 Highcharts 是演示示例之外的一个思维领域。当查看 stackoverflow 时，有大量针对许多不同情况以多种不同方式完成的示例。

我尝试使用一些代码来使其正常工作，但没有成功。

我正在尝试加载图表以每隔几秒重新加载和更新图表。我让 ajax 调用开始工作，输入数据并每隔几秒调用一次。但我无法找到让 highcharts 获取数据并构建图表的方法。

这是从ajax发回的数据，这是一个Multi Series结果

[{"name":"One","data":[[1433203200000,0],[1433289600000,0],[1433376000000,0],[1433462400000,0],[1433548800000
,0],[1433635200000,31.48],[1433721600000,0]]},{"name":"Two","data":[[1433203200000,0],[1433289600000
,0],[1433376000000,0],[1433462400000,0],[1433548800000,0],[1433635200000,0],[1433721600000,0]]}]

这是highchart代码，我做错了什么？

chart = new Highcharts.Chart({
    chart: {
        renderTo: 'final',
        defaultSeriesType: 'spline',
        events: {
            load: function()
            {
              setTimeout(function(){
                 $.ajax({
                    url: 'test',
                    type: 'GET',
                    async: true,
                    dataType: "json",
                    success: function (data) {
                      console.log(data);
                      chart.setData(data,true);
                        //chart.setData(data,true);
                    }
                  });
              }, 10000);                  
            }
        }
    },
    title: {
        text: 'Live random data'
    },
    xAxis: {
        type: 'datetime',
        tickPixelInterval: 150,
        maxZoom: 20 * 1000
    },
    yAxis: {
        minPadding: 0.2,
        maxPadding: 0.2,
        title: {
            text: 'Value',
            margin: 80
        }
    },
    series: []
});

Answer 1

有两件事:

1) setTimeout 仅被调用一次。您可能想使用setInterval。

2) 没有像 chart.setData() 这样的方法。有series.setData() 。打开demo看看它是如何使用的。在你的情况下回调应该是这样的:

        load: function() {
          var myChart = this;
          setInterval(function() {
             $.ajax({
                url: 'test',
                type: 'GET',
                async: true,
                dataType: "json",
                success: function (data) {
                  $.each(data, function(i, d) {
                      if(myChart.series[i]) {
                          myChart.series[i].setData(d.data,false, false);
                      } else { // series doesn't exist
                          myChart.addSeries(d, false);
                      }
                  });
                  myChart.redraw(true);
                }
              });
          }, 1000);                  
        }