我正在构建一个图表，显示当天的天气数据，从JSON文件导入数据。我希望X轴从第一个数据点开始总是24小时(通常是当天午夜过后几分钟(。
我已经想好了如何提取第一个数据点的时间，以及如何计算24小时后所需的值。
我的问题是，当图表加载时，如何将这些值分配给我用来设置最大x轴值的变量？
我的代码是确定X轴的最小值和最大值，并绘制图表
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
</head>
<body bgcolor="#E6E6FA" onload"populatexAxis_data()">
<h1 align="center" style="font-family:verdana; color:#151B54">PYWWS Highcharts Test Web Page</h1>
<h2 align="center" style="font-family:verdana; color:#151B54">Last 24 Hours Weather Data</h2>
<div id="Highcharts">
<figure class="highcharts-figure">
<!--Outside Temperature and Humidity-->
<div id="chart1_container" style="width: 1250px; height: 600px; border:1px solid black; margin: 0 auto"></div>
</figure>
<figure class="highcharts-figure">
<!--Rain-->
<div id="chart2_container" style="width: 1250px; height: 400px; border:1px solid black; margin: 0 auto"></div>
</figure>
var minXaxisValue;
var maxXaxisValue;
var chart1;
var chart2;
var LeftMarginSize = 100;
var RightMarginSize = 150;
function populatexAxis_data() {
$.ajax({
url: 'data/today_highchart.json',
datatype: "json",
success: function(data) {
temp_data = data;
console.log(data);
minValue = data[0][0];
maxValue = minValue + (24 * 3600 * 1000);
},
});
}
//Import data from the JSON file
function getChartdata() {
$.ajax({
url: 'data/today_highchart.json',
datatype: "json",
success: function(data) {
temp_data = data;
//Outside Temperature and Humidity
chart1.series[0].setData(data.map(el => [el[0], el[1]])); //Outside Temperature
chart1.series[1].setData(data.map(el => [el[0], el[2]])); //Outside Humidity
chart1.series[2].setData(data.map(el => [el[0], el[4]])); //Dew Point
chart1.series[3].setData(data.map(el => [el[0], el[3]])); //Apparent Temperature
},
});
}
Highcharts.setOptions({
lang: {
thousandsSep: ','
},
time: {
useUTC: false,
//change to your timezone
timezone: 'Europe/London'
}
});
//Outside Temperature, Dew Point and Humidity
chart1 = Highcharts.chart('chart1_container', {
chart: {
marginLeft: LeftMarginSize,
marginRight: RightMarginSize,
zoomType: 'x',
plotBackgroundColor: '#F9F9F9',
resetZoomButton: {
position: {
// align: 'right', // by default
// verticalAlign: 'top', // by default
x: 100,
y: -55
}
},
events: {
load: getChartdata
},
},
title: {
style: {
fontWeight: 'bold'
},
text: 'Outside Temperature and Humidity for Today from PYWWS',
},
subtitle: {
text: 'Click and drag in the plot are to zoom'
},
xAxis: {
type: 'datetime',
max: maxXaxisValue,
events: {
afterSetExtremes: syncExtremes
}
},
yAxis: [{ // Primary yAxis
lineWidth: 1,
visible: true,
labels: {
enabled: true,
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
softMin: 0,
softMax: 20,
tickInterval: 5,
title: {
text: 'Temperature (xB0C)',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
lineWidth: 1,
visible: true,
min: 0,
max: 100,
alignTicks: false,
tickInterval: 20,
gridLineWidth: 0,
title: {
text: 'Humidity (%)',
style: {
color: Highcharts.getOptions().colors[1]
},
},
labels: {
enabled: true,
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}, { // Third yAxis
lineWidth: 1,
visible: true,
softMin: 0,
softMax: 20,
tickInterval: 5,
gridLineWidth: 0,
title: {
text: 'Dew Point (xB0C)',
style: {
color: Highcharts.getOptions().colors[1]
},
},
labels: {
enabled: true,
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
tooltip: {
shared: true,
borderColor: '#2f7ed8',
crosshairs: true
},
series: [{
name: 'Outside Temperature',
type: 'spline',
color: '#FF0000',
data: [],
tooltip: {
valueSuffix: 'xB0C'
}
}, {
name: 'Outside Humidity',
type: 'spline',
color: '#00FF00',
yAxis: 1,
data: [],
tooltip: {
valueSuffix: ' %'
}
}, {
name: 'Dew Point',
type: 'spline',
color: '#66B2FF',
yAxis: 2,
data: [],
tooltip: {
valueSuffix: 'xB0C'
}
}, {
name: 'Apparent Temperature',
type: 'spline',
color: '#0000FF',
data: [],
tooltip: {
valueSuffix: 'xB0C'
}
}],
plotOptions: {
spline: {
marker: {
radius: 0
},
lineWidth: 1.5,
states: {
hover: {
lineWidth: 2
}
},
threshold: null
}
},
credits: {
enabled: true
},
});
</script>
</body>
</html>
JSON数据示例：
[
[1583366478000,5.8,89.0,3.3,4.1,19.1,44.0,3.8,7.6,35,0.0,0.0,993.1,209.0,0,0],
[1583366778000,5.8,89.0,3.5,4.1,19.1,44.0,3.1,5.4,34,0.0,0.0,993.1,209.0,0,0],
[1583367092000,5.8,89.0,3.3,4.1,19.1,44.0,3.8,null,27,0.0,0.0,992.8,209.0,0,0],
[1583367378000,5.8,89.0,3.1,4.1,19.1,44.0,4.5,6.9,22,0.0,0.0,992.6,209.0,0,0],
[1583367678000,5.8,89.0,3.8,4.1,19.1,44.0,2.2,4.5,19,0.0,0.0,992.9,209.0,0,0],
[1583367978000,5.8,89.0,4.0,4.1,19.0,44.0,1.6,3.8,21,0.0,0.0,992.9,209.0,0,0],
[1583368278000,5.8,89.0,3.1,4.1,19.0,44.0,4.5,7.6,20,0.0,0.0,992.7,209.0,0,0],
[1583368578000,5.8,89.0,4.0,4.1,19.0,44.0,1.6,3.8,21,0.0,0.0,992.6,209.0,0,0],
[1583368878000,5.8,88.0,3.3,4.0,19.0,44.0,3.8,6.0,27,0.0,0.0,992.7,229.1,0,0],
[1583369178000,5.8,88.0,3.3,4.0,19.0,44.0,3.8,null,32,0.0,0.0,992.6,229.1,0,0],
[1583369478000,5.8,88.0,4.3,4.0,19.0,43.0,0.7,2.2,null,0.0,0.0,992.6,229.1,0,0],
[1583369778000,5.8,88.0,3.8,4.0,18.9,45.0,2.2,6.0,39,0.0,0.0,992.7,229.1,0,0],
[1583370078000,5.8,88.0,3.1,4.0,18.9,45.0,4.5,8.3,39,0.0,0.0,992.5,229.1,0,0],
[1583370378000,5.8,88.0,3.3,4.0,18.9,45.0,3.8,5.4,45,0.0,0.0,992.3,229.1,0,0],
[1583370678000,5.8,88.0,3.5,4.0,18.8,45.0,3.1,6.0,44,0.0,0.0,992.2,229.1,0,0],
[1583370978000,5.8,88.0,3.8,4.0,18.8,45.0,2.2,3.8,44,0.0,0.0,992.3,229.1,0,0],
[1583371278000,5.8,88.0,3.8,4.0,18.7,45.0,2.2,3.8,45,0.0,0.0,992.2,229.1,0,0],
[1583371578000,5.8,88.0,3.5,4.0,18.7,44.0,3.1,4.5,45,0.0,0.0,992.0,229.1,0,0],
[1583371878000,5.8,88.0,3.5,4.0,18.7,45.0,3.1,5.4,48,0.0,0.0,992.1,229.1,0,0],
[1583372178000,5.8,88.0,3.8,4.0,18.7,45.0,2.2,3.8,53,0.0,0.0,992.0,229.1,0,0],
[1583372478000,5.8,88.0,3.8,4.0,18.6,44.0,2.2,3.8,63,0.0,0.0,992.1,229.1,0,0],
[1583372778000,5.8,88.0,3.3,4.0,18.6,44.0,3.8,5.4,69,0.0,0.0,991.8,229.1,0,0],
[1583373078000,5.8,88.0,3.5,4.0,18.6,44.0,3.1,null,71,0.0,0.0,991.6,229.1,0,0],
[1583373378000,5.8,88.0,4.0,4.0,18.6,44.0,1.6,3.8,72,0.0,0.0,991.4,229.1,0,0],
[1583373678000,5.7,88.0,3.0,3.9,18.5,44.0,4.5,6.0,74,0.0,0.0,991.4,228.9,0,0],
[1583373978000,5.7,88.0,3.2,3.9,18.5,44.0,3.8,6.9,75,0.0,0.0,991.4,228.9,0,0],
[1583374278000,5.7,88.0,3.7,3.9,18.5,44.0,2.2,4.5,73,0.0,0.0,991.2,228.9,0,0],
[1583374578000,5.7,88.0,3.2,3.9,18.5,44.0,3.8,null,71,0.0,0.0,991.1,228.9,0,0],
[1583374878000,5.7,89.0,3.7,4.0,18.4,44.0,2.2,3.8,70,0.0,0.0,991.1,208.8,0,0],
[1583375178000,5.7,89.0,3.9,4.0,18.4,44.0,1.6,3.8,64,0.0,0.0,991.2,208.8,0,0],
[1583375478000,5.7,89.0,2.7,4.0,18.4,44.0,5.4,7.6,62,0.0,0.0,990.7,208.8,0,0],
[1583375778000,5.7,89.0,3.4,4.0,18.4,44.0,3.1,4.5,62,0.0,0.0,990.6,208.8,0,0],
[1583376078000,5.7,89.0,2.5,4.0,18.4,44.0,6.0,9.2,64,0.0,0.0,990.6,208.8,0,0],
[1583376378000,5.7,89.0,3.4,4.0,18.3,44.0,3.1,5.4,64,0.0,0.0,990.4,208.8,0,0],
[1583376678000,5.7,89.0,3.7,4.0,18.2,44.0,2.2,4.5,64,0.0,0.0,990.5,208.8,0,0],
[1583376978000,5.7,89.0,3.0,4.0,18.2,44.0,4.5,8.3,66,0.0,0.0,990.3,208.8,0,0],
[1583377278000,5.7,89.0,3.4,4.0,18.2,44.0,3.1,4.5,67,0.0,0.0,990.1,208.8,0,0],
[1583377578000,5.7,89.0,3.2,4.0,18.2,44.0,3.8,6.0,62,0.0,0.0,990.1,208.8,0,0],
[1583377878000,5.6,89.0,3.1,3.9,18.2,44.0,3.8,7.6,59,0.0,0.0,990.1,208.6,0,0],
[1583378178000,5.6,89.0,3.3,3.9,18.1,44.0,3.1,4.5,56,0.0,0.0,990.0,208.6,0,0],
[1583378478000,5.6,89.0,3.3,3.9,18.1,44.0,3.1,5.4,53,0.0,0.0,989.9,208.6,0,0],
[1583378778000,5.6,88.0,3.0,3.8,18.1,44.0,3.8,6.9,49,0.0,0.0,990.0,228.7,0,0],
[1583379078000,5.6,88.0,3.3,3.8,18.1,44.0,3.1,null,41,0.0,0.0,990.0,228.7,0,0],
[1583379378000,5.6,88.0,3.7,3.8,18.1,44.0,1.6,3.1,34,0.0,0.0,989.5,228.7,0,0],
[1583379678000,5.6,88.0,3.3,3.8,18.0,44.0,3.1,4.5,30,0.0,0.0,989.5,228.7,0,0],
[1583379978000,5.6,88.0,3.7,3.8,18.0,44.0,1.6,5.4,35,0.0,0.0,989.5,228.7,0,0],
[1583380278000,5.6,88.0,3.3,3.8,18.0,44.0,3.1,8.3,44,0.0,0.0,989.6,228.7,0,0],
[1583380578000,5.6,88.0,3.5,3.8,18.0,44.0,2.2,6.9,50,0.0,0.0,989.6,228.7,0,0],
[1583380878000,5.6,88.0,3.5,3.8,18.0,44.0,2.2,4.5,53,0.0,0.0,989.3,228.7,0,0],
[1583381178000,5.6,88.0,3.0,3.8,17.9,44.0,3.8,6.0,53,0.0,0.0,989.4,228.7,0,0],
[1583381478000,5.6,88.0,3.3,3.8,17.9,44.0,3.1,null,52,0.0,0.0,989.5,228.7,0,0],
[1583381778000,5.6,88.0,3.0,3.8,17.9,44.0,3.8,6.0,54,0.0,0.0,989.5,228.7,0,0],
[1583382078000,5.6,87.0,3.2,3.6,17.9,44.0,3.1,7.6,58,0.0,0.0,989.2,249.0,0,0],
[1583382378000,5.6,87.0,3.0,3.6,17.9,44.0,3.8,6.0,58,0.0,0.0,988.8,249.0,0,0],
[1583382678000,5.6,87.0,3.2,3.6,17.8,44.0,3.1,4.5,49,0.0,0.0,989.0,249.0,0,0],
[1583382978000,5.6,87.0,3.0,3.6,17.8,44.0,3.8,5.4,45,0.0,0.0,988.9,249.0,0,0],
[1583383278000,5.6,87.0,3.5,3.6,17.8,44.0,2.2,6.0,42,0.0,0.0,988.7,249.0,0,0],
[1583383578000,5.6,87.0,3.5,3.6,17.8,44.0,2.2,4.5,36,0.0,0.0,988.5,249.0,0,0],
[1583383878000,5.6,87.0,3.2,3.6,17.8,44.0,3.1,5.4,33,0.0,0.0,988.6,249.0,0,0],
[1583384178000,5.6,87.0,2.8,3.6,17.7,44.0,4.5,6.9,33,0.0,0.0,988.3,249.0,0,0],
[1583384478000,5.6,87.0,3.2,3.6,17.8,44.0,3.1,4.5,32,0.0,0.0,988.2,249.0,0,0],
[1583384778000,5.6,87.0,2.5,3.6,17.8,44.0,5.4,8.3,32,0.0,0.0,988.2,249.0,0,0],
[1583385078000,5.6,87.0,3.2,3.6,17.8,44.0,3.1,6.9,36,0.0,0.0,988.0,249.0,0,0],
[1583385378000,5.6,87.0,3.2,3.6,17.7,43.0,3.1,6.9,41,0.0,0.0,987.9,249.0,0,0],
[1583385678000,5.6,87.0,3.7,3.6,17.7,43.0,1.6,3.1,46,0.0,0.0,988.0,249.0,0,0],
[1583385978000,5.6,87.0,3.7,3.6,17.7,43.0,1.6,3.8,49,0.0,0.0,988.0,249.0,0,0],
[1583386278000,5.6,87.0,2.5,3.6,17.7,43.0,5.4,11.4,56,0.0,0.0,987.5,249.0,0,0],
[1583386578000,5.6,87.0,3.0,3.6,17.6,43.0,3.8,null,56,0.0,0.0,987.4,249.0,0,0],
[1583386878000,5.6,87.0,3.2,3.6,17.6,44.0,3.1,7.6,55,0.0,0.0,987.7,249.0,0,0],
[1583387178000,5.6,87.0,3.2,3.6,17.6,44.0,3.1,5.4,55,0.0,0.0,987.7,249.0,0,0],
[1583387478000,5.7,87.0,3.3,3.7,17.7,44.0,3.1,5.4,55,0.0,0.0,987.6,249.2,0,0],
[1583387778000,5.7,87.0,2.9,3.7,17.7,44.0,4.5,6.9,54,0.0,0.0,987.5,249.2,0,0],
[1583388078000,5.7,86.0,2.9,3.5,17.8,45.0,4.5,7.6,49,0.0,0.0,987.2,269.7,0,0],
[1583388378000,5.7,86.0,3.8,3.5,17.8,45.0,1.6,3.8,46,0.0,0.0,987.2,269.7,0,0],
[1583388678000,5.7,86.0,3.1,3.5,17.9,45.0,3.8,6.9,45,0.0,0.0,987.1,269.7,0,0],
[1583388978000,5.7,86.0,3.3,3.5,17.9,45.0,3.1,6.0,44,0.0,0.0,987.1,269.7,0,0],
[1583389278000,5.7,85.0,3.3,3.4,18.0,46.0,3.1,5.4,44,0.0,0.0,987.0,290.4,0,0],
[1583389578000,5.7,85.0,2.9,3.4,18.2,47.0,4.5,6.9,45,0.3,0.3,986.8,290.4,0,0],
[1583389878000,5.7,85.0,2.1,3.4,18.1,47.0,6.9,12.1,45,0.0,0.3,986.7,290.4,0,0],
[1583390178000,5.7,85.0,3.6,3.4,18.2,47.0,2.2,4.5,48,0.0,0.3,986.7,290.4,0,0],
[1583390478000,5.7,85.0,2.9,3.4,18.2,47.0,4.5,6.9,50,0.0,0.3,986.8,290.4,0,0],
[1583390778000,5.7,85.0,3.1,3.4,18.4,48.0,3.8,6.9,55,0.0,0.3,986.4,290.4,0,0],
[1583391078000,5.7,85.0,3.3,3.4,18.6,50.0,3.1,6.9,59,0.0,0.3,986.3,290.4,24,0],
[1583391378000,5.7,85.0,2.4,3.4,18.7,50.0,6.0,9.2,64,0.0,0.3,986.3,290.4,88,0],
[1583391678000,5.7,85.0,2.9,3.4,18.8,51.0,4.5,7.6,68,0.0,0.3,986.1,290.4,176,0],
[1583391978000,5.7,84.0,2.6,3.2,18.9,50.0,5.4,8.3,72,0.0,0.3,986.0,311.3,341,0],
[1583392278000,5.7,84.0,2.6,3.2,19.0,50.0,5.4,6.9,76,0.0,0.3,986.2,311.3,634,0],
[1583392578000,5.7,84.0,3.0,3.2,19.0,50.0,3.8,7.6,78,0.0,0.3,986.3,311.3,634,0],
[1583392878000,5.7,84.0,2.3,3.2,19.0,46.0,6.0,8.3,82,0.0,0.3,986.1,311.3,856,0],
[1583393178000,5.7,84.0,3.5,3.2,19.0,46.0,2.2,5.4,81,0.0,0.0,986.0,311.3,883,0],
[1583393478000,5.7,84.0,3.3,3.2,19.0,46.0,3.1,6.0,77,0.0,0.0,986.0,311.3,925,0],
[1583393778000,5.8,84.0,3.2,3.3,19.0,46.0,3.8,7.6,72,0.0,0.0,985.9,311.6,1195,0],
[1583394078000,5.8,84.0,3.9,3.3,19.0,45.0,1.6,3.8,66,0.0,0.0,985.7,311.6,1327,0],
[1583394378000,5.8,84.0,3.0,3.3,19.0,45.0,4.5,11.4,61,0.0,0.0,985.9,311.6,1396,0],
[1583394678000,5.8,84.0,3.7,3.3,19.0,45.0,2.2,3.8,60,0.0,0.0,985.5,311.6,1417,0],
[1583394978000,5.8,84.0,2.2,3.3,19.0,45.0,6.9,12.1,61,0.0,0.0,985.8,311.6,1438,0],
[1583395278000,5.9,84.0,2.3,3.4,19.0,44.0,6.9,8.3,59,0.0,0.0,985.7,311.8,1322,0],
[1583395578000,5.9,84.0,2.6,3.4,19.0,44.0,6.0,13.0,62,0.0,0.0,985.9,311.8,1655,0],
[1583395878000,5.9,84.0,3.5,3.4,19.0,44.0,3.1,5.4,63,0.0,0.0,985.7,311.8,1739,1],
[1583396178000,5.9,84.0,3.3,3.4,19.0,44.0,3.8,8.3,64,0.0,0.0,985.7,311.8,1787,0],
[1583396478000,5.9,84.0,3.5,3.4,19.0,44.0,3.1,6.0,68,0.0,0.0,985.5,311.8,1678,1],
[1583396778000,6.0,83.0,3.4,3.3,18.9,45.0,3.8,6.9,71,0.0,0.0,985.5,333.3,2019,1],
[1583397078000,6.0,83.0,2.4,3.3,18.9,45.0,6.9,9.2,74,0.0,0.0,985.5,333.3,2089,1],
[1583397378000,6.0,83.0,3.6,3.3,18.9,44.0,3.1,4.5,73,0.0,0.0,985.3,333.3,2070,1]
]
问题是在加载图表之前没有为maxXaxisValue变量赋值，因此轴的最大值不会设置为数据开始后24小时。
如何运行populatexAxis_data函数以确保在加载高图之前将maxXaxisValue变量设置为一个值
您可以使用update功能将此最小值和最大值分配给xAxis。
演示：https://jsfiddle.net/BlackLabel/65z841jo/
function getChartdata() {
$.ajax({
url: 'https://api.npoint.io/4b808e06dc1e356cd1c6',
datatype: "json",
success: function(data) {
console.log(data)
temp_data = data;
//Outside Temperature and Humidity
chart1.series[0].setData(data.map(el => [el[0], el[1]])); //Outside Temperature
chart1.series[1].setData(data.map(el => [el[0], el[2]])); //Outside Humidity
chart1.series[2].setData(data.map(el => [el[0], el[4]])); //Dew Point
chart1.series[3].setData(data.map(el => [el[0], el[3]])); //Apparent Temperature
minValue = data[0][0];
maxValue = minValue + (24 * 3600 * 1000);
chart1.xAxis[0].update({
min: minValue,
max: maxValue
})
},
});
}
API：https://api.highcharts.com/class-reference/Highcharts.Axis#update
这就是你的想法吗？
我设法做到了这一点，在用数据填充序列之前，我需要设置轴min和max。
function getChartdata() {
$.ajax({
url: 'https://api.npoint.io/4b808e06dc1e356cd1c6',
datatype: "json",
success: function(data) {
temp_data = data;
minValue = data[0][0];
maxValue = minValue + (24 * 3600 * 1000);
chart1.xAxis[0].update({min: minValue, max: maxValue});
//Outside Temperature and Humidity
chart1.series[0].setData(data.map(el => [el[0], el[1]])); //Outside Temperature
chart1.series[1].setData(data.map(el => [el[0], el[2]])); //Outside Humidity
chart1.series[2].setData(data.map(el => [el[0], el[4]])); //Dew Point
chart1.series[3].setData(data.map(el => [el[0], el[3]])); //Apparent Temperature
},
});
}