每次加载第二个数组时都会更新图表:Highcharts,Javascript

问题描述 投票:0回答:1

所以,我所拥有的条件是在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被称为Twice,该怎么做才能将第二组数据附加到第一组数据,而无需重新加载整个图表。

这里是我的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值?

javascript mysql highcharts
1个回答
0
投票

您如何看待用新数据更新当前系列,它将是将旧数据与新数据合并而成的数组?

  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

© www.soinside.com 2019 - 2024. All rights reserved.