HighCharts, как добавить набор данных в реальном времени на существующий график

Question

Этот скрипт HighChart строит точку на графике при каждом щелчке мыши. Моя проблема в том, что я хотел бы добавить в таблицу второй ряд данных. Данные будут входящими данными координаты xy из источника mqtt. Я пытался сделать это в течение нескольких дней безуспешно.

Может кто-нибудь показать мне, как это делается? Я даже не могу заставить лейблы серии появляться. Был бы хорош пример со случайными данными.

position_array = [[100 * Math.random() , 100 * Math.random()] // fake x,y data

Спасибо

(document).ready(function(){ // encapsulate jQuery
console.log("hey click");
Highcharts.chart('container', {
    chart: {
        type: 'scatter',
        margin: [70, 50, 60, 80],
        events: {
            click: function (e) {
                // find the clicked values and the series
                var x = Math.round(e.xAxis[0].value),
                    y = Math.round(e.yAxis[0].value),
                    series = this.series[0];
                // Add it
                console.log('2:',Math.round(e.xAxis[0].value),Math.round(e.yAxis[0].value))
                var coord = String(x)+','+String(y)
                publish(coord,'pclks',2);
                series.addPoint([x, y]);  
            }
        }
    },
    title: {
        text: 'Click supplied data'
    },
    subtitle: {
        text: 'Move Robot by clicking a point on the Graph'
    },
    xAxis: {
        gridLineWidth: 1,
        minPadding: 0.2,
        maxPadding: 0.2,
        maxZoom: 60
    },
    yAxis: {
        title: {
            text: 'Value'
        },
        minPadding: 0.2,
        maxPadding: 0.2,
        maxZoom: 60,
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    plotOptions: {
        series: {
            lineWidth: 1,
            point: {
                events: {
                    load: function () {
                        console.log("hey load b");
                        if (this.series.data.length > 1) {
                            this.remove();
                        }
                    }
                }
            }
        }
    },
    series: [{name: "data0",
        data: [[20, 20], [80, 80]]},
    }]
});             });

Answer 1

Сначала вам нужно определить этот ряд (может быть пустым объектом):

        series: [{
            name: "data0",
            data: [
                [20, 20],
                [80, 80]
            ]
        }, {

        }]

Или вы можете добавить его, используя метод chart.addSeries().

И затем вы можете легкодобавьте баллы к новой серии, как в этом примере: https://codepen.io/raf18seb/pen/mddXNMo?editors=1010

            events: {
                click: function (e) {
                    var x = Math.round(e.xAxis[0].value),
                        y = Math.round(e.yAxis[0].value),
                        firstSeries = this.series[0],
                        secondSeries = this.series[1];
                    firstSeries.addPoint([x, y]);
                    secondSeries.addPoint([Math.round(Math.random() * 100), Math.round(Math.random() * 100)]);
                }
            }

Дайте мне знать, если у вас есть какие-либо дополнительные вопросы.

Answer 2

Как вы объяснили, я только что сделал это решение на codepen, потому что jsfidde в настоящее время не работает: Codepen Link

Я использовал simute новые данные в конце кода, чтобы показать, как2 серии полностью независимы

var chart = Highcharts.chart('container', {
chart: {
    type: 'scatter',

    events: {
        click: function(e) {
            // find the clicked values and the series
            var x = Math.round(e.xAxis[0].value),
                y = Math.round(e.yAxis[0].value),
                series = this.series;
            // Add new series if not
            if (series.length < 2) {
                this.addSeries({
                    name: 'clicked-series',
                    data: [
                        [x, y]
                    ]
                });
            } else { // add new point
                series[1].addPoint([x, y])
            }

            }
        }
    },
    title: {
        text: 'User supplied data'
    },
    subtitle: {
        text: 'Click the plot area to add a point. Click a point to remove it.'
    },
    xAxis: {
        gridLineWidth: 1,
        minPadding: 0.2,
        maxPadding: 0.2,
        maxZoom: 60
    },
    yAxis: {
        title: {
            text: 'Value'
        },
        minPadding: 0.2,
        maxPadding: 0.2,
        maxZoom: 60,
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    plotOptions: {
        series: {
            lineWidth: 1,
            point: {

            }
        }
    },
    series: [{
        data: [
            [20, 20],
            [30, 80]
        ]
    }]
});
// simulate robot post new data to chart
k = 1;
setInterval(function() {
    chart.series[0].addPoint([35 * (k++), Math.random() * 100])
}, 10000)