所以,我所拥有的条件是在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值?
您如何看待用新数据更新当前系列,它将是将旧数据与新数据合并而成的数组?
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