多系列高库存实时图表

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