从JSON / MySQL数据生成多行图表
首先，我道歉，我不是一个程序员(但我正在学习-慢慢)。我对园艺应用的图形感兴趣。根据select语句，我有一个数据库，它每小时从传感器获取数据，查询获取最后12到48次读数。在您的论坛帮助下，我创建了3个文件，这些文件一起从MySQL中提取数据，绘制一个具有多个系列的图形:时间戳(带有各种显示选项)、温度和湿度。
我的工作是基于https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/line-basic中的这个例子，它使用了“在脚本中”提供的数据，但是三周后，我无法从JSON注入数据
我的第一个文件建立了JSON连接，第二个文件提取数据并将其格式化为MySQL数据，第三个文件应该创建图形，但不是:-( )。
这就是我们生产的每一行都有一个系列标签，而不是每个系列的一行。
你能帮帮我吗?我想要一张显示温度和湿度的线条图。时间/日期沿底部x轴，左侧y轴温度以度和右y轴显示百分比湿度。我问得太多了吗？
最后，如果可能的话，我可以不请求Ajax或除php、html、JSON和javascripts之外的其他“东西”吗？
如能对我的问题提出任何帮助，将不胜感激：)
<?php $json_data = include ('nw_database02.php');?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Line Graph</title>
</head>
<body>
<script src="https://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/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<div id="container"></div>
<script type="text/javascript">
Highcharts.chart('container', {
title: {
text: 'Temperature and Humidity'
},
subtitle: {
text: 'Source: Greenhouse1'
},
yAxis: {
title: {
text: 'Temperature'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: <?= $json_data?> ,
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
</script>
</body>
</html>..。
如果我回显$json_data，就会得到这种结果，但请记住，它是动态数据，每小时都会更改一次，所以每次访问页面时都必须从json_data读取：
{“时间戳”：“10:04 02/01/21”、“温度”：“5”、“湿度”：“66”}、{“时间戳”：“10:19 02/01/21”、“温度”：“6”、“湿度”：“65”}、{“时间戳”：“10:35 02/01/21”、“温度”：“6”、“湿度”：“64”}、{“时间戳”：“10:50 02/01/21"，“温度”：“6”，“湿度”：“64”}，{“时间戳”：“11:06/01/21”，“温度”：“6”，“湿度”：“64”}，{“时间戳”：“11:21 02/01/21"，”温度“：”7“，”湿度“：”63“}，{”时间戳“：”11:34 02/01/21"，“温度”：“10”，“湿度”：“66”}，{“时间戳”：“04:21 02/01/21”、“温度”：“15”、“湿度”：“64”}、{“时间戳”：“04:36 02/01/21”、“温度”：“16”、“湿度”：“61”}、{“时间戳”：“04:51 02/01/21”、“温度”：“15”、“湿度”：“59”}、{“时间戳”：“05:07 02/01/21"，“温度”：“15”，“湿度”：“60”}，{“时间戳”：“05:22 02/01/21"，”温度“：”14“，”湿度“：”61“}
回答 2
Stack Overflow用户
发布于 2021-02-23 14:41:47
您需要将数据格式化为高级图表所要求的系列结构。其余的需求可以通过使用图表选项来实现--请检查API中的xAxis和yAxis属性。
var data = <?= $json_data?>
var series = [{
name: "temperature",
data: []
},
{
name: "humidity",
data: [],
yAxis: 1
}
];
data.forEach(function(dataEl) {
series[0].data.push([
new Date(dataEl.Timestamp).getTime(),
Number(dataEl.temperature)
]);
series[1].data.push([
new Date(dataEl.Timestamp).getTime(),
Number(dataEl.humidity)
]);
});
Highcharts.chart('container', {
series: series,
yAxis: [{
title: {
text: 'temperature'
}
},
{
title: {
text: 'humidity'
},
opposite: true
}
],
xAxis: {
type: 'datetime'
}
});现场演示： http://jsfiddle.net/BlackLabel/aw95vek6/
API参考： https://api.highcharts.com/highcharts/series.line.data
Stack Overflow用户
发布于 2021-02-23 12:18:52
您可以使用下面的代码实现，但是当您首先选择图表时，请了解其用途，并根据本系列创建json数据，免费使用附加图表。
<script type="text/javascript">
var data=[{"Timestamp":"10:04 02/01/21","temperature":"5","humidity":"66"},{"Timestamp":"10:19 02/01/21","temperature":"6","humidity":"65"},{"Timestamp":"10:35 02/01/21","temperature":"6","humidity":"64"},{"Timestamp":"10:50 02/01/21","temperature":"6","humidity":"64"},{"Timestamp":"11:06 02/01/21","temperature":"6","humidity":"64"},{"Timestamp":"11:21 02/01/21","temperature":"7","humidity":"63"},{"Timestamp":"11:34 02/01/21","temperature":"10","humidity":"66"},{"Timestamp":"04:21 02/01/21","temperature":"15","humidity":"64"},{"Timestamp":"04:36 02/01/21","temperature":"16","humidity":"61"},{"Timestamp":"04:51 02/01/21","temperature":"15","humidity":"59"},{"Timestamp":"05:07 02/01/21","temperature":"15","humidity":"60"},{"Timestamp":"05:22 02/01/21","temperature":"14","humidity":"61"}];
console.log(data);
var timestamp=[];
var temperature=[];
var humidity=[];
$.each(data, function(i, item) {
console.log(data[i]);
timestamp.push(data[i].Timestamp);
temperature.push(data[i].temperature);
humidity.push(data[i].humidity);
});
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
xAxis: {
categories: timestamp,
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'temperature',
data: temperature
}, {
name: 'humidity',
data: humidity
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
</script>https://stackoverflow.com/questions/66332544
复制相似问题
腾讯云开发者
