Блог

Я использую websockets для потоковой передачи действительного JSON в highcharts.js . Моя цель — нанести несколько линий одновременно на один и тот же график. JSON, которым я управляю, содержит данные 4-16 серий (называемые синтаксическими анализаторами), которые я хотел бы наложить на highcharts. Пример 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 amp;amp; 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 ?

Общая идея должна заключаться в том, что для каждой серии вы устанавливаете ее 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
                    });
                }
            });