如何在同一動態圖中添加多條線（Highchart）？

Question

我遇到的問題是，我想向此動態圖表添加1條額外的線（可能稍后再添加），但是只有一條線正在更新，也就是說，我想讓兩條不同的線使用Y上的不同隨機數據進行更新軸？

這是我正在處理的示例，請單擊此處。

這是我編寫的代碼，如果您想看到我的問題，請將該代碼復制並粘貼到上面的鏈接中。

$(function () {

    Highcharts.setOptions({
        global : {
            useUTC : false
        }
    });
    // Create the chart
    $('#container').highcharts('StockChart', {
        chart : {
            events : {
                load : function () {

                    // set up the updating of the chart each second
                    var series = this.series[0];
                    setInterval(function () {
                        var x = (new Date()).getTime(), // current time
                            y = Math.round(Math.random() * 100);
                        series.addPoint([x, y], true, true);
                    }, 1000);
                }
            }
        },

        rangeSelector: {
            buttons: [{
                count: 1,
                type: 'minute',
                text: '1M'
            }, {
                count: 5,
                type: 'minute',
                text: '5M'
            }, {
                type: 'all',
                text: 'All'
            }],
            inputEnabled: false,
            selected: 0
        },

        title : {
            text : 'Live random data'
        },

        exporting: {
            enabled: false
        },

        series : [{
            name : 'diagram1',
            data : (function () {
                // generate an array of random data
                var data1 = [], time = (new Date()).getTime(), i;

                for (i = -999; i <= 0; i += 1) {
                    data1.push([
                        time + i * 1000,
                        Math.round(Math.random() * 100)
                    ]);
                }
                return data1;
            }())
        },
        {
            name : 'diagram2',
            data : (function () {
                // generate an array of random data
                var data2 = [], time = (new Date()).getTime(), i;

                for (i = -999; i <= 0; i += 1) {
                    data2.push([
                        time + i * 1000,
                        Math.round(Math.random() * 100)
                    ]);
                }
                return data2;
            }())
        }]
    });

});

Answer 1

在圖表加載事件中，只需為第二個序列添加另一個間隔。 為了防止代碼重復，您可以將所有數據存儲在一個對象中並對其進行迭代。

這是小提琴 。

$(function () {

    Highcharts.setOptions({
        global : {
            useUTC : false
        }
    });
    // Create the chart
    $('#container').highcharts('StockChart', {
        chart : {
            events : {
                load : function () {

                    // set up the updating of the chart each second
                    var series = this.series[0];
                    setInterval(function () {
                        var x = (new Date()).getTime(), // current time
                            y = Math.round(Math.random() * 100);
                        series.addPoint([x, y], true, true);
                    }, 1000);
                    /* second series update code */
                    var series1 = this.series[1];
                    setInterval(function () {
                        var x = (new Date()).getTime(), // current time
                            y = Math.round(Math.random() * 100);
                        series1.addPoint([x, y], true, true);
                    }, 1000);
                }
            }
        },

        rangeSelector: {
            buttons: [{
                count: 1,
                type: 'minute',
                text: '1M'
            }, {
                count: 5,
                type: 'minute',
                text: '5M'
            }, {
                type: 'all',
                text: 'All'
            }],
            inputEnabled: false,
            selected: 0
        },

        title : {
            text : 'Live random data'
        },

        exporting: {
            enabled: false
        },

        series : [{
            name : 'diagram1',
            data : (function () {
                // generate an array of random data
                var data1 = [], time = (new Date()).getTime(), i;

                for (i = -999; i <= 0; i += 1) {
                    data1.push([
                        time + i * 1000,
                        Math.round(Math.random() * 100)
                    ]);
                }
                return data1;
            }())
        },
        {
            name : 'diagram2',
            data : (function () {
                // generate an array of random data
                var data2 = [], time = (new Date()).getTime(), i;

                for (i = -999; i <= 0; i += 1) {
                    data2.push([
                        time + i * 1000,
                        Math.round(Math.random() * 100)
                    ]);
                }
                return data2;
            }())
        }]
    });

});

Answer 2

您可以使用foreach;

 $(function () {

    Highcharts.setOptions({
        global : {
            useUTC : false
        }
    });

    // Create the chart
    $('#container').highcharts('StockChart', {
        chart : {
            events : {
                load : function () {

                    // set up the updating of the chart each second
                    var series = this.series;
                    series.forEach(function(serie) {
                        setInterval(function () {
                        var x = (new Date()).getTime(), // current time
                            y = Math.round(Math.random() * 100);
                        serie.addPoint([x, y], true, true);
                    }, 1000);
                    });

                }
            }
        },

        rangeSelector: {
            buttons: [{
                count: 1,
                type: 'minute',
                text: '1M'
            }, {
                count: 5,
                type: 'minute',
                text: '5M'
            }, {
                type: 'all',
                text: 'All'
            }],
            inputEnabled: false,
            selected: 0
        },

        title : {
            text : 'Live random data'
        },

        exporting: {
            enabled: false
        },

        series : [{
            name : 'diagram1',
            data : (function () {
                // generate an array of random data
                var data1 = [], time = (new Date()).getTime(), i;

                for (i = -999; i <= 0; i += 1) {
                    data1.push([
                        time + i * 1000,
                        Math.round(Math.random() * 100)
                    ]);
                }
                return data1;
            }())
        },
        {
            name : 'diagram2',
            data : (function () {
                // generate an array of random data
                var data2 = [], time = (new Date()).getTime(), i;

                for (i = -999; i <= 0; i += 1) {
                    data2.push([
                        time + i * 500,
                        Math.round(Math.random() * 50)
                    ]);
                }
                return data2;
            }())
        }]
    });

});

Answer 3

這對我有用，現在我可以有兩條動態線。 有沒有一種方法可以添加更多動態圖表而無需復制setInterval等，您可以看到以下要點。

        // set up the updating of the chart each second
        var series = this.series[0];
        setInterval(function () {
            var x = (new Date()).getTime(), // current time
                y = Math.round(Math.random() * 100);
            series.addPoint([x, y], true, true);
        }, 1000);

        /* second series update code */
        var series1 = this.series[1];
        setInterval(function () {
            var x = (new Date()).getTime(), // current time
                y = Math.round(Math.random() * 100);
            series1.addPoint([x, y], true, true);
        }, 1000);

        /* third series update code */
        var series2 = this.series[2];
        setInterval(function () {
            var x = (new Date()).getTime(), // current time
                y = Math.round(Math.random() * 100);
            series2.addPoint([x, y], true, true);
        }, 1000);

        /* fourth series update code */
        var series3 = this.series[3];
        setInterval(function () {
            var x = (new Date()).getTime(), // current time
                y = Math.round(Math.random() * 100);
            series3.addPoint([x, y], true, true);
        }, 1000);