每次加载第二个数组时图表更新：Highcharts，Javascript

Question

所以，我在 MySQL 中的条件是先显示前 1000 个数据点，然后在 Highcharts 中显示其他 2000 个数据点。

if lastindex==0:
            cur.execute("SELECT data,value FROM table where id<1001")
        else:
            cur.execute("SELECT data,value FROM table where id>1001 and id<3000")
        data = cur.fetchall()  
//python Code to fetch SQL data

现在我正在做的是将数据渲染到 Highcharts 中，数据正在被渲染。但是问题出现了，在显示前1000个数据点后，Highcharts值从0开始，然后显示其他2000个点

数据不会连续显示，因为它应该在第一个数据结束后绘制发送数组数据。

我认为 Highcharts 被称为两次，我可以做些什么来将第二组数据附加到第一组而不重新加载整个图表。

这是我的 Highchart 的 js 片段

Highcharts.chart("chartcontainer", {
                chart: {
                    type: 'line',
                    animation: Highcharts.svg, // don't animate in old IE
                    marginRight: 10,
                    events: {
                        load: function() {

                            var series = this.series[0],
                                chart = this;

                            setInterval(function() {

                      //some logic regarding the chart
                       //..
                        v = {
                                                y: y,
                                                x: x
                                            };

                    console.log("V value", v);
                    series.addSeries(v, false, true);
                    counter++;
                    localcounter++;                                 
                }   else
                {

                    oldcounter=counter;
                    flagToreload=1;
                                    }
                            }, 1000/130);

                            setInterval(function() {
                                chart.redraw(false);
                            }, 100);
                        }
                    }
                },

                time: {
                    useUTC: false
                },

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

                    type: 'Value',

                    gridLineWidth: 1

                },
                yAxis: {
                    title: {
                        text: 'Value'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }],
                    gridLineWidth: 1
                },
                tooltip: {
                    headerFormat: '<b>{series.name}</b><br/>',
                    pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
                },
                exporting: {
                    enabled: false
                },
                series: [{
                    animation: false,
                    name: 'Random data',
                    data: (function() {
                        // generate an array of random data
                        var data = [],
                            time = counter,
                            i;

                        for (i = -1000; i <= 0; i += 1) {
                            data.push([
                                counter,
                                null
                        ]);


                        }
                        return data;
                    }())
                }]
            });

我想要的只是附加事件数据而不是加载整个图表。

如何在不重新加载整个图表的情况下重新加载特定的 Highchart 值？

Answer 1

您如何看待用新数据更新当前系列，这将是一个与新数据合并的旧数据数组？

  chart: {
    events: {
        load(){
             let chart = this,
                 currentSeries = chart.series[0],
             newData;
             newData = [...currentSeries.userOptions.data, ...data1]

                setTimeout(()=> {
                chart.series[0].update({
                data: newData
              })
            }, 5000)
      }
    }
  },

见demo