[英]Difference between highcharts and highstock during real time trace and xAxis with max value
I got a problem with highstock.我遇到了 highstock 的问题。 I'm trying to add real time data to my chart.我正在尝试将实时数据添加到我的图表中。 But I noticed different behaviour from highchart and highstock when max xAxis is set.但是我注意到设置 max xAxis 时与 highchart 和 highstock 的行为不同。
For example, if the xAxis max is 100 and I add the value 20: - in the highcharts one, the value is added in the first half of the chart - in the highstock one, the value is added at the end, at the margin of the chart例如,如果 xAxis 最大值为 100 并且我添加值 20: - 在 highcharts 中,该值添加在图表的前半部分 - 在 highstock 中,该值添加到最后,在边距图表的
Look this two running examples:看看这两个运行示例:
highcharts: http://jsfiddle.net/Jy83b/高图: http : //jsfiddle.net/Jy83b/
highstock: http://jsfiddle.net/mE6XM/高库存: http : //jsfiddle.net/mE6XM/
I need the highcharts behaviour in the highstock chart.. How can I solve it?我需要 highstock 图表中的 highcharts 行为.. 我该如何解决?
Thank you!谢谢!
highcharts code高图代码
var pippo = (new Date()).getTime() + 60000;
$(function () {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$('#container').highcharts({
chart: {
type: 'spline',
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 = Math.random();
series.addPoint([x, y], true, false);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
max: pippo
},
yAxis: {
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: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
}]
});
});
});
highstock code高库存代码
var pippo = (new Date()).getTime() + 60000;
$(function () {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$('#container').highcharts('StockChart',{
chart: {
type: 'spline',
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 = Math.random();
series.addPoint([x, y], true, false);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
exporting: {
enabled: false
},
rangeSelector: {
enabled: false
},
navigator : {
enabled : false
},
scrollbar : {
enabled : false
},
legend : {
enabled : false
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
max: pippo
},
yAxis: {
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: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
}]
});
});
});
Solved it!解决了!
Added ordinal: false to xAxis向 xAxis 添加序数:false
Add ordinal: false
to your xAxis
settings:添加ordinal: false
到您的xAxis
设置:
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
max: pippo,
ordinal: false
},
Then you'll have the same behaviour.然后你会有同样的行为。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.