0
X軸でdatetimeを使用するハイチャートの線グラフの場合、最初にpointIntervalのデータを使用してチャートをレンダリングするには、ハイチャートとほぼほぼ一定の時間間隔のデータ
私の場合、最初のレンダリングでは、時間間隔に関係なく、正確に200個のサンプルが使用されます。例えば、与えられたチャートの期間は1週間です。最初のページには、3,024秒離れた200データポイント（7 * 24 * 60 * 60/200）が送られます。その後、60秒ごとにAjax経由で動的に更新されます。
複数のアプローチを試しましたが、Ajax 60秒のティックでは、最初のページの3,024秒のティックと同じ変更が行われるか、最初に作成されたグラフのスケールが変更されます。チャートは主に同じままですが、新しく受信したAjaxデータでゆっくり更新されます。
https://jsbin.com/zuboyeh/edit?html,outputには、これらの試みのいくつかが示されています。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts</title>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function() {
/*
Total of 6 options.
Using pointAdd or pointUpdate.
Also, three options this way
Option 1. Pre-load w/o time, change pointInterval, then continue with no time. Doesn't work as it changes past date formats
Option 2. Pre-load w/o time, then continue with time.
Option 3. Pre-load w/ time, then continue with time.
*/
//initially page will display daily data for one month
var numberOfDatapointsToDisplay=200; //Given
var chartDuration = 7*24*60*60; //One week given resulting in 60,4800 seconds
var secondsInterval = chartDuration/numberOfDatapointsToDisplay; //3024 seconds
var pointInterval = 1000*secondsInterval; //ms
var tickInterval = null; //tickInterval is the interval of the tick marks in axis units. Not sure how to handle
var secondsIntervalAjax=60; //One minute given for ajax request time
var currentTime=new Date().getTime()/1000; //UTC time
var secondsStart=currentTime - numberOfDatapointsToDisplay*secondsInterval; //Start a week in the past and then populate upon page load
var pointStart = 1000*secondsStart; //ms
//Get initial data
var data1=[],data2=[],data3=[];
for (var i = 0; i < numberOfDatapointsToDisplay; i++) {
var v=gv(pointInterval/1000); //Data simulator for this example
data1[i]=v; //attempt using a single value
data2[i]=[secondsStart,v]; //attempt using cartesian values
secondsStart+=secondsInterval;
}
$("#addPoint").click(function() {
//Simulate ajax request using addPoint()
currentTime+=secondsIntervalAjax;
var v=gv(secondsIntervalAjax);
chart1.series[0].addPoint(v, true, true); //attempt using a single value
chart2.series[0].addPoint([currentTime,v], true, true); //attempt using cartesian values
});
$("#updateSeries").click(function() {
//Simulate ajax request using update()
currentTime+=secondsIntervalAjax;
var v=gv(secondsIntervalAjax);
data1.push(v);
data2.push([currentTime,v]);
chart1.series[0].update({data: data1}); //attempt using a single value
chart2.series[0].update({data: data2}); //attempt using cartesian values
});
$("#changePointInterval").click(function() {
//Try changing the pointInterval used for the initial page data and ajax data
chart1.series[0].update({pointInterval: secondsIntervalAjax*1000});
chart2.series[0].update({pointInterval: secondsIntervalAjax*1000});
})
var chart1 = new Highcharts.Chart({
chart: {
type: "line",
renderTo: 'container1'
},
xAxis: {
type: "datetime",
//tickInterval: tickInterval,
//tickPixelInterval: 50
},
series: [
{name: 'SeriesName', data: data1},
],
plotOptions: {
series: {
pointStart: pointStart,
pointInterval: pointInterval,
}
},
});
var chart2 = new Highcharts.Chart({
chart: {
type: "line",
renderTo: 'container2'
},
xAxis: {
type: "datetime",
//tickInterval: tickInterval,
dateTimeLabelFormats: {month: '%e. %b',year: '%b'},
tickPixelInterval: 50
},
series: [
{name: 'SeriesName', data: data2},
],
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
});
function gv(s) {
//Data simulator for new value after s seconds
if (typeof this.v == 'undefined') {
this.v = 100;
}
this.v=this.v+50*numberOfDatapointsToDisplay*(Math.random()-.5) * s/chartDuration;
return this.v;
}
});
</script>
</head>
<body>
<button id="addPoint">addPoint</button>
<button id="updateSeries">updateSeries</button>
<button id="changePointInterval">changePointInterval</button>
<div id="container1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div id="container2" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
あなたのチャートをどのように正確に動作させたいのかよくわかりません。最初は200ポイント、 'pointInterval'は3024ポイントです（これまでのところはすべて問題ありません）。次に、x位置が最後の点x + 60秒になる別の点を追加したいとします（ 'pointInterval'はこの点より小さくなるはずです）？ –
@ KamilKulig、はい、 'pointInterval'は60,000ミリ秒ですが、変更すると前のグラフデータに影響します。 – user1032531