从 JSON / MySQL 数据产生 highcharts 多折线图
[英]Produce highcharts multiple line chart from JSON / MySQL data
问题描述
Firstly I apologise, I am not a programmer (but I am learning - slowly).
首先我道歉，我不是程序员（但我正在学习 - 慢慢地）。 I am interested in graphs for Horticultural applications.我对园艺应用的图表很感兴趣。 I have a database that gets data from sensors on an hourly basis and the query grabs the last 12 to 48 readings, according to the select statement.根据 select 语句，我有一个每小时从传感器获取数据的数据库，查询获取最后 12 到 48 个读数。 With help from your forum, I have created 3 files that together extract the data from MySQL to plot a graph with multiple series of: Timestamp (with various options for display), temperature and humidity.在您的论坛的帮助下，我创建了 3 个文件，它们一起提取了从 MySQL 到 plot 的数据：时间戳（带有各种显示选项）、温度和湿度。
I based my work on this example in fiddle https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/line-basic which uses data provided 'in the script' but after three weeks I can't inject the data from JSON我的工作基于小提琴https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/line-basic中的这个示例，它使用脚本中提供的数据' 但三周后我无法从 JSON 注入数据
The first of my files makes the MySQL db connection, the second file extracts and formats the data into JSON data and the third is supposed to create the graph but doesn't:-(.我的第一个文件建立了 MySQL 数据库连接，第二个文件提取数据并将其格式化为 JSON 数据，第三个文件应该创建图形但没有：-(。
this is what is produced with a series label for each row, rather than a line for each series.这是每行使用 label 系列生产的产品，而不是每个系列的生产线。
Can you help me?你能帮助我吗？ I would like a line graphs showing temperature and humidity.我想要一个显示温度和湿度的折线图。 Time/date along the bottom x-axis, the left y-axis temperature in degrees and a right-hand y-axis showing percentage humidity.沿底部 x 轴的时间/日期，左侧 y 轴温度（以度为单位）和右侧 y 轴显示百分比湿度。 Am I asking too much?我要求太多了吗？
Finally can I please request no Ajax, or other "stuff" other than php, html, JSON, and javascripts if possible?最后，我能否请求没有 Ajax 或除 php、html、Z0ECD11C1D7A2874018D 和 4D7A287A2FZ1 之外的其他“东西”
Any help on formatting my question would be much appreciated:-)对于格式化我的问题的任何帮助将不胜感激:-)
<?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>
... ...
If I echo the $json_data I get this type of result, but bear in mind it is dynamic data and changes every hour so it must be read from json_data every time the page is accessed:如果我回显 $json_data 我会得到这种类型的结果，但请记住它是动态数据并且每小时更改一次，因此每次访问页面时都必须从 json_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"}] [{"时间戳":"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 02/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 个解决方案
解决方案1
0 2021-02-23 12:18:52
you can achive with below code but when you choosing chart first know the purpose and create json data accroding to the series use apexcharts for free您可以使用以下代码来实现，但是当您选择图表时，首先要知道目的并根据该系列创建 json 数据，免费使用 apexcharts
<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>
解决方案2
0 已采纳 2021-02-23 14:41:47
You need to format your data to the series structure required by Highcharts.您需要将数据格式化为 Highcharts 所需的系列结构。 The rest of the requirements are achievable by using chart options - please check xAxis and yAxis properties in API.要求的 rest 可以通过使用图表选项来实现 - 请检查 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'
}
});
Live demo: http://jsfiddle.net/BlackLabel/aw95vek6/现场演示： http://jsfiddle.net/BlackLabel/aw95vek6/
API Reference: https://api.highcharts.com/highcharts/series.line.data API 参考： https://api.highcharts.com/highcharts/series.line.data
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.