多系列Highstock實時圖表

Question

我已經有一個實時實時圖表，其中包含一系列工作。 就像本教程一樣 。

這是我的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
});