Question

我已经有一个使用PHP和mysql的静态图表，但是这个实时图表不会显示预期的内容。

这是我的图表代码

$(document).ready(function() {
    chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'spline',
            events: {
                load: requestData
            }
        },
        series: [{
            name: 'S1',
            data: []},{
            name: 'S2',
            data: []},{
            name: 'S3',
            data: []},{
            name: 'S4',
            data: []},{
            name: 'S5',
            data: []},{
            name: 'S6',
            data: []
        }]
    });        
});

这是ajax代码

function requestData() {
    $.ajax({
    url: 'live-server-data.php',
    success: function(points) {
        var series = chart.series,
            shift;
        $.each(series, function(i, s) {
            shift = s.data.length > 20;
            s.addPoint(points[i], false, shift);
        });
        setTimeout(requestData, 1000);   
        chart.redraw(); 
    },
    cache: false
    });
}

最后，这是live-server-data.php

提供的JSON示例

[[1453945513000,640],[1453945513000,1197],[1453945513000,1112],[1453945513000,402],[1453945513000,879],[1453945513000,658]]

编辑：

这是live-server-data.php

中的代码

header("Content-type: text/json");
$x = time() * 1000;
for($i=0; $i<6; $i++){
    $ret[]=array($x, mt_rand(350, 1200));
}
echo json_encode($ret);

Answer 1

问题在于更新导航系列。当你浏览所有系列时：

 $.each(series, function(i, s) { ... });

然后您还会更新导航器系列。但是，您的AJAX数据没有足够的分数。我建议在AJAX响应中再添加一个点（例如与数据中的第一个点相同），并为导航器创建单独的系列：

// Create the chart
$('#container').highcharts('StockChart', {
  chart: {
    events: {
      load: requestData
    }
  },

  navigator: {
    series: {
        data: []
    }
  },

  series: [{
    name: 'Random data',
    data: []
   }, {
    name: 'Random data 2',
    data: []
  }]
});

现场演示：http://jsfiddle.net/dqkjrd7k/1/

多系列highstock实时图表显示不正确

1 个答案: