将多个系列流式传输到highcharts

Question

我正在使用websockets将有效的JSON流式传输到highcharts.js。我的目标是在同一个图表上同时绘制几行。我控制的JSON包含数据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
                    });
                }
            });