我在一个 android 应用程序中使用 highchart 来显示一个动态图表,该图表每 3 秒更新一次并显示超过一天。
我的图表由两个固定数据系列组成,显示监控数据不应超过的限制,显然监控数据(功率值)从 00:05 到加载图表的那一刻的所有功率值,首先显示。然后,每 3 秒,这个系列就会增加一个值。
问题是当我尝试缩放到功率值的终点时。当我放大时,电源数据线(只有这一条)消失。如果我缩小,该线会重新出现。但是,如果我放大未显示数据电源线端点的区域,则一切正常。
我试图删除两个固定系列(它将我的图表高度调整为电源数据线的长度,但无论如何),并且出现了相同的缩放问题。我无法缩放到电源数据线的终点,但可以缩放到其他任何地方。我也尝试使用数据分组,但问题保持不变
这是我的代码:
$(function() {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: true
}
});
var dataPower = Android.getDayHistory((new Date()).getHours(), (new Date()).getMinutes(), (new Date()).getSeconds());
//var dataPower = [];
console.log(dataPower);
// Create the chart
$('#container').highcharts(
'StockChart',
{
chart : {
type : 'line',
backgroundColor : '#d6d7d4',
ignoreHiddenSeries: false,
zoomType : 'x',
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 = Android.getData((new Date()).getHours(),(new Date()).getMinutes(), (new Date()).getSeconds());
series.addPoint([ x, y ]);
Android.checkAlert((new Date()).getHours(),(new Date()).getMinutes(), (new Date()).getSeconds());
}, 3000);
}
},
},
rangeSelector : {
buttons : [ {
type : 'minute',
count : 2,
text : '2m'
}, {
type : 'minute',
count : 5,
text : '5m'
}, {
type : 'minute',
count : 30,
text : '30m'
}, {
type : 'hour',
count : 1,
text : '1h'
}, {
type : 'all',
text : 'All'
} ],
selected : 4,
inputEnabled : false,
},
xAxis : {
ordinal : false,
minRange : 36000
},
yAxis : {
title : {
text : 'Power (MW)'
},
max : 500,
plotBands : [ {
from : 0,
to : 100,
color : 'rgba(247, 247, 247, 0.3)'
}, {
from : 100,
to : 200,
color : 'rgba(215, 216, 212, 0.3)'
}, { // Light breeze
from : 200,
to : 300,
color : 'rgba(247, 247, 247, 0.3)'
}, { // Light breeze
from : 300,
to : 400,
color : 'rgba(215, 216, 212, 0.3)'
}, {
from : 400,
to : 500,
color : 'rgba(247, 247, 247, 0.3)'
} ]
},
plotOptions: {
spline: {
lineWidth: 2,
states: {
hover: {
enabled: true,
lineWidth: 3
}
},
marker: {
enabled: false,
states: {
hover: {
enabled : true,
radius: 5,
lineWidth: 1
}
}
}
}
},
title : {},
subtitle : {},
navigator : {
enabled : false
},
scrollbar : {
enabled : false
},
credits : {
enabled : false
},
series : [
{
name : 'Power',
data : eval('[' + dataPower + ']'),
pointStart : Date.UTC((new Date()).getFullYear(),
(new Date()).getMonth(), (new Date()).getDate()),
pointInterval : 3000,
},
{
data : [
[
Date.UTC(
(new Date()).getFullYear(),
(new Date()).getMonth(),
(new Date()).getDate(), 0,
5, 0), 40 ],
[
Date.UTC(
(new Date()).getFullYear(),
(new Date()).getMonth(),
(new Date()).getDate(), 7,
0, 0), 40 ],
[
Date.UTC(
(new Date()).getFullYear(),
(new Date()).getMonth(),
(new Date()).getDate(), 7,
30, 0), 440 ],
[
Date.UTC(
(new Date()).getFullYear(),
(new Date()).getMonth(),
(new Date()).getDate(), 11,
57, 0), 440 ],
[
Date.UTC(
(new Date()).getFullYear(),
(new Date()).getMonth(),
(new Date()).getDate(), 12,
3, 0), 390 ],
[
Date.UTC(
(new Date()).getFullYear(),
(new Date()).getMonth(),
(new Date()).getDate(), 13,
57, 0), 390 ]
,
[
Date.UTC(
(new Date()).getFullYear(),
(new Date()).getMonth(),
(new Date()).getDate(), 14,
3, 0), 440 ],
[
Date.UTC(
(new Date()).getFullYear(),
(new Date()).getMonth(),
(new Date()).getDate(), 17,
3, 0), 440 ],
[
Date.UTC(
(new Date()).getFullYear(),
(new Date()).getMonth(),
(new Date()).getDate(), 23,
55, 0), 40 ]
],
type : 'line',
color : "#d3a6ad",
enableMouseTracking : false
},
{
data : [
[
Date.UTC(
(new Date()).getFullYear(),
(new Date()).getMonth(),
(new Date()).getDate(), 0,
5, 0), 60 ],
[
Date.UTC(
(new Date()).getFullYear(),
(new Date()).getMonth(),
(new Date()).getDate(), 7,
0, 0), 60 ],
[
Date.UTC(
(new Date()).getFullYear(),
(new Date()).getMonth(),
(new Date()).getDate(), 7,
30, 0), 460 ],
[
Date.UTC(
(new Date()).getFullYear(),
(new Date()).getMonth(),
(new Date()).getDate(), 11,
57, 0), 460 ],
[
Date.UTC(
(new Date()).getFullYear(),
(new Date()).getMonth(),
(new Date()).getDate(), 12,
3, 0), 410 ],
[
Date.UTC(
(new Date()).getFullYear(),
(new Date()).getMonth(),
(new Date()).getDate(), 13,
57, 0), 410 ]
,
[
Date.UTC(
(new Date()).getFullYear(),
(new Date()).getMonth(),
(new Date()).getDate(), 14,
3, 0), 460 ],
[
Date.UTC(
(new Date()).getFullYear(),
(new Date()).getMonth(),
(new Date()).getDate(), 17,
3, 0), 460 ],
[
Date.UTC(
(new Date()).getFullYear(),
(new Date()).getMonth(),
(new Date()).getDate(), 23,
55, 0), 60 ]
],
type : 'line',
color : "#d3a6ad",
enableMouseTracking : false
} ]
});
});
});