我有以下问题:
我想用Ajax Calls中的Points动态更新hightstock图表。例如,我使用setInterval(addPoints,3000);我如何开发代码,highstock图表显示一个确定的时间,例如1分钟,图表开始从左侧绘制,没有这个"时间弹出和挤压?对于一个testrun我试图预测零点,但间隔不修复。
var value1="valueNo1";
var value2="valueNo2";
var color1="green";
var color2="red";
$(function () {
$('#container').highcharts('StockChart',{
chart: {
type: 'spline',
zoomtype: 'z'
},
title: {
text: 'Live random data'
},
navigator: {
top: 500
},
legend: {
enabled: true
},
rangeSelector: {
buttons: [{
count: 30,
type: 'second',
text: '30s'
}, {
count: 1,
type: 'minute',
text: '1M'
}, {
count: 2,
type: 'minute',
text: '2M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 1
},
xAxis: {
type: 'datetime'
}
});
});
var chart = $('#container').highcharts();
var ct = (new Date()).getTime();
// addAxis
chart.addAxis({ labels: { format: '{value}' , style: {color: color1 } }, title: { text: value1 , style: {color: color1} } , lineColor: color1, lineWidth: 0, opposite:true } );
chart.addAxis({ labels: { format: '{value}', style: {color: color2 } }, title: { text: value2 , style: {color: color2} } , lineColor: color2, lineWidth: 0 } );
// addSeries
chart.addSeries({ "name": "value1","data": [], yAxis: 2, marker: {enabled:true, radius: 5 }});
// addPoint
var current_time = (new Date()).getTime();
chart.series[0].addPoint([current_time+64000, null], false);
addPoints = function(){
var current_time = (new Date()).getTime();
chart.series[0].addPoint([current_time, Math.random()*10], false);
chart.redraw();
}
setInterval(addPoints,3000);
请参阅问题的jsFiddle演示:
http://jsfiddle.net/ehonk/FLzRH/1/
请帮忙
答案 0 :(得分:0)
“弹出”是添加的数据以及将最后一个点连接到新点并且yAxis重新缩放的线。为了最大限度地减少这种情况,我将yAxis.max
设置为可能的最大值。其次,我会看一下动画,看看当adds新点时你想要使用哪种动画。
要处理“sqeezing”,您可以设置“可查看”范围和添加点,以便在添加新点时,左侧的最后一个点落在可视区域之外。
答案 1 :(得分:0)
您也可以拨打setExtremes来设置xAxis上的范围。