将多个系列流式传输到 highcharts

Question

我正在使用 websockets 将有效的 JSON 流式传输到 highcharts.js。我的目标是在同一张图上同时绘制几条线。我控制的 JSON 包含我想用 highcharts 覆盖的数据 4-16 系列（称为解析器）。 JSON 示例：

[
    {
        "y": 91,
        "x": 1403640998,
        "name": "parser1"
    },
    {
        "y": 184,
        "x": 1403640998,
        "name": "parser2"
    },
    {
        "y": 26,
        "x": 1403640998,
        "name": "parser3"
    }
]

我可以用一条线来绘制图形，但它们会组合成一个系列。我想根据我正在监视的解析器的数量动态调整系列。如果我的 JSON 包含 3 个解析器的信息，就像我在上面发布的那样，我希望看到 3 行每秒自动更新。

如您所见，我只能显示 1 个。

我的 HTML

<script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'spline',
            events: {
                load: function () {
                    var $message = $('#message');
                    var connection = new WebSocket('ws://x.x.x.x:8888/ws');
                    var self = this;

                    connection.onmessage = function(event) {
                        var data = JSON.parse(event.data);
                        var series = self.series[0];
                        var redrawVal = true;
                        var shiftVal = false;
                        if (series.data && series.data.length > 25) {shiftVal = true;}

                        var newseries = {
                            name: '',
                            x: 0,
                            y: 0
                        };


                        $.each(data, function(i,item){
                            newseries.name = item.name;
                            newseries.x = item.x;
                            newseries.y = item.y;

                            console.log(newseries)
                            series.addPoint(newseries, redrawVal, shiftVal);

                        });

                    };
                }
            }
        },
        title: {
            text: 'Using WebSockets for realtime updates'
        },
        xAxis: {
            type: 'date'
        },
        series: [{
            name: 'series',
        data: []
        }]

    });
});

有人可以帮我在 highcharts.js 中动态显示多个系列吗？

Answer 1

一般的想法应该是，对于您设置的每个系列，它都是id。然后您可以通过这种方式获得该系列：chart.get(id)。因此，如果您有系列，则将点添加到该系列，如果没有，则创建新的，就像这样：http://jsfiddle.net/9FkJc/8/

            var self = this;
            data = [{
                "y": 91,
                    "x": 1403640998,
                    "name": "parser1"
            }, {
                "y": 184,
                    "x": 1403640998,
                    "name": "parser2"
            }, {
                "y": 26,
                    "x": 1403640998,
                    "name": "parser3"
            }];

            var series = self.series[0];
            var redrawVal = true;

            $.each(data, function (i, item) {
                var series = self.get(item.name);
                if (series) { // series already exists
                    series.addPoint(item, redrawVal, series.data.length > 25);
                } else { //  new series
                    self.addSeries({
                        data: [item],
                        id: item.name
                    });
                }
            });