问题描述
我得到了一个漂亮的图表，显示了一条温度值线。 但我不知道如何为 JSON 输出中也包含的湿度值添加第二行。
我使用getJSON(url,...)将数据作为 JSON 获取getJSON(url,...)例如 [时间戳、温度、湿度]：
[[1551454476000, 22, 38.900001525878906], [1551454520000, 22, 38.900001525878906], [1551454530000, 22, 38.900001525878906], [1551454547000, 22, 38.900001525878906], ...
这是我的图表，只有一条温度线：
这是 HTML 代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Fleisch</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highstock.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON('http://127.0.0.1:5000/data.json', function(json) {
var options =
{
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Kuehlschrank',
x: -20 //center
},
xAxis: {
type:'datetime',
},
yAxis: {
title: {
text: 'Temperatur'
}
},
series: [{
data: [],
type: 'line',
name: "Temperatur"
}]
}
options.series[0].data = json;
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
我正在努力为湿度在同一图中添加第二行。 任何帮助真的很感激！
更新：JSON 响应
解决方案
let humidity = [];
let temperature = [];
for(let i = 0; i < json.length; i++){
temperature.push(json[i][1])
humidity.push(json[i][2])
}
options.series[0] = {
data: temperature,
type: 'line',
name: "Temperature"
}
options.series[1] = {
data: humidity,
type: 'line',
name: "Humidity"
}
1楼
Vladimir Bogomolov
2
已采纳
2019-03-03 17:05:14
您可以通过在option.series数组中创建一个object类型的新元素来添加另一行。
例如：
option.series.push(
{
data: // insert your humidity data here
type: 'line',
name: "Humidity"
}
)
您可以超过 1 行的示例。
编辑
首先，您将一个数组数组分配给您的温度数据，此时您应该只获取每个数组的第二个元素并使用它创建您的温度数据。
根据您的 JSON 屏幕截图，您应该这样做才能正确显示温度：
let temperature = [];
for(let i = 0; i < json.length; i++){
temperature.push(json[i][1]) // push the second element of each array of information to my temperature arrays
}
现在你需要对你的湿度做同样的事情，而是从每个信息数组中推送第三个元素（第二个索引）。
let humidity = [];
for(let i = 0; i < json.length; i++){
humidity.push(json[i][2]) //
}
现在您将拥有温度和湿度阵列。 然后，您可以像这样轻松地将它们分配给您的系列。
options.series[0] = {
data: temperature // here you insert the temperature array
type: 'line',
name: "Temperature"
}
options.series[1] = {
data: humidity// here you insert the humidity array.
type: 'line',
name: "Humidity"
}
随意使用 console.log 记录温度和湿度数组以检查它们的外观。