多系列highstock实时图表

Question

我已经有一个实时实时图表，其中一个系列正在工作。就像this tutorial。

这是我的js代码

<script>
var chart;
function requestData() {
    $.ajax({
        url: 'live-server-data.php',
        success: function(point) {
            var series = chart.series[0],
                shift = series.data.length > 20;
            chart.series[0].addPoint(point, true, shift);
            setTimeout(requestData, 1000);    
        },
        cache: false
    });
}
</script>

这是live-server-data.php传递的JSON

[1430687116000,994]

如何让js脚本图多于一个系列？我的猜测是迭代传递的 JSON 数组并为每个系列添加点，但不知道如何在 js、jquery、ajax 或我必须使用的任何东西上实现它。

Answer 1

你需要两件事：

1) 您的服务器应在该请求中返回更多信息，例如：

[ [1430687116000, 994], [1430687116000, 5], ... , [1430687116000, 11] ]

或者更好的格式，只提供一次时间戳：

{
    "timestamp": 1430687116000,
    "points": [ 994, 5, ... , 11 ]
}

2) 现在只需更新所有系列：

$.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
});

或者使用 JSON 的第二种格式：

$.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.timestamp, points.data[i]], false, shift);
        });
        setTimeout(requestData, 1000);   
        chart.redraw(); 
    },
    cache: false
});