Android アプリで highchart を使用して、3 秒ごとに更新され、1 日にわたって表示される動的グラフを表示しています。
私のチャートは、監視されたデータが超えてはならない限界を表示する2つの固定データ系列で構成されており、明らかに監視されたデータ（電力値）00:05からチャートがロードされた瞬間までのすべての電力値が最初に表示されます。そして、3 秒ごとに値がこのシリーズに追加されます。
問題は、パワー値の終点にズームしようとしたときです。ズームインすると、電力データ ライン (およびこの 1 つだけ) が消えます。ズームアウトすると、ラインが再び表示されます。しかし、データ電力線の終点が表示されていない領域をズームすると、すべてがうまくいきます。
2 つの固定セリエを削除しようとしました (グラフの高さをパワー データ ラインの長さに調整しますが、何でも)、同じズームの問題が発生します。電力データ ラインの終点にズームすることはできませんが、他の場所にはズームできます。データグループ化も使用しようとしましたが、問題は同じままです
これが私のコードです：
$(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
} ]
});
});
});