Für eine Highchart Liniendiagramm Datumzeit auf der X-Achse verwendet wird, wie kann das Diagramm zunächst mit einem pointInterval und dynamisch aktualisiert unter Verwendung eines anderen unter Verwendung von Daten wiedergegeben werden?Highchart und „fast normalen“ Zeitintervalldaten
Für meinen Fall, wodurch die ursprünglich exakt 200 Proben unabhängig von der Zeitdauer nutzen. Nehmen wir beispielsweise an, dass die Dauer eines bestimmten Diagramms 1 Woche beträgt. Die erste Seite erhält 200 Datenpunkte im Abstand von 3.024 Sekunden (7 * 24 * 60 * 60/200). Dann wird es alle 60 Sekunden über Ajax dynamisch aktualisiert.
Ich habe versucht, mehrere Ansätze, aber entweder die Ajax 60 Sekunden Ticks produzieren die gleiche Änderung wie die erste Seite 3,024 Sekunden Ticks oder die anfänglich erstellte Skala verändert oder einige andere unerwünschte Ergebnis. Das Diagramm sollte in erster Linie gleich bleiben, aber langsam mit den neu empfangenen Ajax-Daten aktualisiert werden.
folgende an https://jsbin.com/zuboyeh/edit?html,output zeigt mehrere dieser Versuche.
<!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>
Ich verstehe nicht ganz, wie Sie möchten, dass sich Ihr Diagramm genau verhält. Anfangs hast du 200 Punkte und "pointInterval" 3024s (alles ist bei weitem in Ordnung). Dann willst du einen weiteren Punkt hinzufügen, dessen x-Position der letzte Punkt x + 60 Sekunden sein soll ('pointInterval' sollte ab diesem Punkt kleiner werden)? –
@KamilKulig, ja, 'pointInterval' ist jetzt 60.000 ms, aber die Änderung wirkt sich auf die vorherigen Diagrammdaten aus. – user1032531