Question

我正在尝试使用2个系列来获取样条图表，每两秒更新一次。我花了很多时间搜索各种例子，我可以得到许多不同的东西，但不是这个。我似乎无法找到一个正如我想要做的那样的例子。

我有以下通过ajax返回的json：

[{"name":"Test1","data":[[1415567095000,2117]]},{"name":"Test2","data":[[1415567095000,2414]]}]

以下是我对图表定义的看法。这是我发现的一个稍微修改过的例子，但我不知道如何让它工作。我知道它不应该那么复杂，因为我是javascript的新手，我怀疑它会是一些简单的东西，我只是不知道。我知道我需要定义多个系列，然后使用shift执行addPoint，但我似乎无法让它工作。

<script type="text/javascript">
$(document).ready(function() {

    var options = {
            chart: {
                renderTo: 'container',
                type: 'spline',
            },
            title: {
                text: 'Dynamic RPS'
            },
            subtitle: {
                text: 'US East'
            },
            xAxis: {
               type: 'datetime',
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'RPS '
                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{}]
    };
setInterval(function() {

    $.getJSON('test.php', function(data) {
           options.series = data;
        var chart = new Highcharts.Chart(options);
    });
}, 20000);

});
</script>

非常感谢任何帮助!!

Answer 1

假设您的test.php每次通话都会返回一个新点，我就这样编码：

  var chart = null;
  function callAjax(){
    $.getJSON('test.php', function(data) {
      if (chart === null){ // first call, create the chart
        options.series = data;
        chart = new Highcharts.Chart(options);
      } else {
        var seriesOneNewPoint = data[0].data[0]; // subsequent calls, just get the point and add it
        var seriesTwoNewPoint = data[1].data[0];
        chart.series[0].addPoint(seriesOneNewPoint, false, false); // first false is don't redraw until both series are updated
        chart.series[1].addPoint(seriesTwoNewPoint, true, false); // second false is don't shift
      }
      setTimeout(callAjax, 20000);  // queue up next ajax call
    });
  }
  callAjax();

这里是example。请注意，它只是一遍又一遍地绘制相同的点。

highcharts样条曲线，每隔几秒更新一次

1 个答案: