Highcharts 实时图表 setExtremes 问题
Highcharts live graph setExtremes issue
我有一个带有实时数据更新的高图,我使用 setInterval 添加虚假数据,当从 ajax 调用接收到数据时,我添加或更新数据点,具体取决于图形上是否存在时间戳,正如您在示例中看到的那样,即使列超出图形区域,数据长度也会不断增加,
http://jsfiddle.net/3sf5kq78/1/
$(function () {
var minTime = (new Date()).getTime();
var time_range = 20000;
var maxTime = minTime - time_range;
$(document).ready(function () {
$('#add').on('click', function(){
updateDataPoints();
});
/**
* Function to update data points, in real using using socket
*/
var updateDataPoints = function(){
var data = chart.series[0].data;
var updateCount=0;
for(var i=0; i<data.length;i++){
var row = data[i];
row.update(row.y+Math.random(1,5));
updateCount++;
}
$('#updateCount').text(updateCount);
}
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart = new Highcharts.Chart({
chart: {
renderTo:'container',
type: 'column',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
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 = 1;
series.addPoint([x, y], true, false);
var time = ( (new Date()).getTime() );
chart.xAxis[0].setExtremes( time - time_range, time);
$('#count').text(series.data.length);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
max: minTime,
min: maxTime
},
yAxis: {
min:0,
max:20,
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: []
}]
});
});
});
如何将数据点的数量限制为仅在图表上可见(使用 setExtremes)
您可以使用序列更新然后切片数据来保持序列的相同长度。
load: function () {
var series = this.series[0],
yData = series.yData,
y;
setInterval(function () {
y = Math.random();
yData = series.yData;
yData.push(y);
series.yData = yData;
series.update({
data: yData.slice(1)
});
}, 1000);
}
我有一个带有实时数据更新的高图,我使用 setInterval 添加虚假数据,当从 ajax 调用接收到数据时,我添加或更新数据点,具体取决于图形上是否存在时间戳,正如您在示例中看到的那样,即使列超出图形区域,数据长度也会不断增加,
http://jsfiddle.net/3sf5kq78/1/
$(function () {
var minTime = (new Date()).getTime();
var time_range = 20000;
var maxTime = minTime - time_range;
$(document).ready(function () {
$('#add').on('click', function(){
updateDataPoints();
});
/**
* Function to update data points, in real using using socket
*/
var updateDataPoints = function(){
var data = chart.series[0].data;
var updateCount=0;
for(var i=0; i<data.length;i++){
var row = data[i];
row.update(row.y+Math.random(1,5));
updateCount++;
}
$('#updateCount').text(updateCount);
}
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart = new Highcharts.Chart({
chart: {
renderTo:'container',
type: 'column',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
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 = 1;
series.addPoint([x, y], true, false);
var time = ( (new Date()).getTime() );
chart.xAxis[0].setExtremes( time - time_range, time);
$('#count').text(series.data.length);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
max: minTime,
min: maxTime
},
yAxis: {
min:0,
max:20,
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: []
}]
});
});
});
如何将数据点的数量限制为仅在图表上可见(使用 setExtremes)
您可以使用序列更新然后切片数据来保持序列的相同长度。
load: function () {
var series = this.series[0],
yData = series.yData,
y;
setInterval(function () {
y = Math.random();
yData = series.yData;
yData.push(y);
series.yData = yData;
series.update({
data: yData.slice(1)
});
}, 1000);
}