有沒有一種方法可以用一個 x 軸數據（使用 Highcharts 和 php）來可視化許多 y 軸數據
[英]Is there a way to visualize many y-Axis-Data with one x-Axis Data (with Highcharts and php)
問題描述
我的問題是，我沒有看到 y 軸數據（在我的例子中是溫度或濕度）。 我得到了 x 軸，它顯示了（只有一個月）。 （我的評論是德語...）
如果有人可以幫助我解決這個問題或給我提示我如何解決它，我將不勝感激。
我的目標是可視化每個數據，但是每個 y 軸數據都有月份名稱，這會讓人感到困惑，這就是為什么我只顯示一個月並且在（DHT11 的溫度和濕度）顯示在 y 軸上。
但是看highcharts的表沒有數據：第一張圖是孔圖+highcharts的表
我之前保存的數據（var data...在代碼中，只顯示了一些，我削減了一些數據因為它更多...）
{"xAxis":["November 2022","December 2022"],"yAxis1":[{"name":"November 2022","data":[22,22,22,22,23,23,23,23,22,23,23,22,22,22,23,23,23,23,23,23]},{"name":"December 2022","data":[25,25,26,26,26,26,26,26,26,26,26,26,26,26,26,26,26,26,26,26,26,26,27,26,27,27,26,26,27,26,27,27,26,27,27,2726,0,26,0,26,0,0,0,26,0,26,0,0,0,26,25,25,25,25,25,25,25,25,25,25,25,25,25,25,25,25,18,19,19,19,19,19,19,19,19,19,19,19,19,19,19,19,19,19,19,19,19,19,19,19,19,19,19,19]}],"yAxis2":[{"name":"November 2022","data":[37,38,38,79,95,95,95,95,82,74,71,46,45,38,38,38,37,40,40,39]},{"name":"December 2022","data":[43,43,39,39,39,39,39,39,39,39,39,39,39,39,38,39,39,39,38,38,39,38,38,38,38,39,38,38,38,38,38,38,38,38,38,38,35,0,35,0,35,0,0,0,35,0,35,0,0,0,35,34,34,34,34,34,34,34,34,34,34,34,34,34,34,34,34,62,53,53,53,54,54,54,53,54,53,54,53,54,53,54,54,54,53,54,54,53,54,53,53,53,53,53,53]}]}
這是代碼（我從數據庫中獲取所有數據並保存）：
<?php
// Verbindung mit der MySQL-Datenbank herstellen
$con = mysqli_connect('ip', 'root', 'root', 'Sensordata');
$query = "SELECT DATE_FORMAT(datetime, '%M %Y') AS datetime, temp, hum FROM temp_humidity";
$result = mysqli_query($con, $query);
// Array erstellen, um die Daten aus der Datenbank zu speichern
$data = array();
// Schleife durch die Daten in der Datenbank
while ($row = mysqli_fetch_array($result)) {
// Datum (Monat) und Zeitstempel des Datensatzes speichern
$datetime = $row['datetime'];
$timestamp = strtotime($datetime);
// Wenn das Array für den Monat noch nicht existiert, erstelle es
if (!isset($data[$timestamp])) {
$data[$timestamp] = array(
'xAxis' => $datetime,
'yAxis1' => array(),
'yAxis2' => array()
);
}
// Füge die Y-Werte (Temperatur und Feuchtigkeit) dem Array hinzu
$data[$timestamp]['yAxis1'][] = (int)$row['temp'];
$data[$timestamp]['yAxis2'][] = (double)$row['hum'];
}
// Die Daten für das Diagramm aufbereiten
$xAxis = array();
$yAxis1 = array();
$yAxis2 = array();
foreach ($data as $datetime => $values) {
$xAxis[] = $values['xAxis'];
$yAxis1[] = array(
'name' => $values['xAxis'],
// Überprüfe, ob die Werte im Array für die Y-Achse Integers sind. Falls nicht, konvertiere sie.
'data' => array_map(function ($value) { return is_int($value) ? $value : (int)$value; }, $values['yAxis1'])
);
$yAxis2[] = array(
'name' => $values['xAxis'],
// Überprüfe, ob die Werte im Array für die Y-Achse Doubles sind. Falls nicht, konvertiere sie.
'data' => array_map(function ($value) { return is_double($value) ? $value : (double)$value; }, $values['yAxis2'])
);
}
// Daten für das Diagramm in einem Array zusammenfassen
$chartData = array(
'xAxis' => $xAxis,
'yAxis1' => $yAxis1,
'yAxis2' => $yAxis2
);
// Datenarray in JSON-Format konvertieren, um sie in Highcharts verwenden zu können
$json_data = json_encode($chartData);
// Datenarray in JSON-Format konvertieren, um sie in Highcharts verwenden zu können
//$json_data = json_encode($data);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SensMo</title>
</head>
<body>
<!-- Highcharts-Bibliothek importieren -->
<script src="highcharts/js/highcharts.js"></script>
<script src="highcharts/js/modules/exporting.js"></script>
<script src="highcharts/js/modules/export-data.js"></script>
<script src="highcharts/js/modules/accessibility.js"></script>
<!-- Diagrammbereich definieren -->
<div id="container" style="width:100%; height:400px;"></div>
<pre>
<?php print_r($json_data); ?>
</pre>
<!-- Diagramm erstellen -->
<script type='text/javascript'>
// Daten aus dem JSON-Array verwenden
var data = <?php echo $json_data; ?>;
// Diagramm erstellen und in den definierten Bereich einfügen
Highcharts.chart('container', {
chart: {
//type: 'scatter' // Diagrammtyp (XY-Diagramm)
//type: 'line' // Diagrammtyp (Linie)
type: 'area'
},
title: {
text: 'Device pi-002 Temperaturverlauf' // Titel des Diagramms
},
xAxis: {
categories: data.xAxis, // X-Achse verwendet die Werte aus dem 'datetime'-Array
title: {
text: 'Zeit'
}
},
yAxis: [{
// Erste Y-Achse zeigt die Temperaturen an
title: {
text: 'Temperatur (C°)'
},
labels: {
formatter: function () {
return this.value + '°C'; // Werte in C° anzeigen
}
}
}, {
// Zweite Y-Achse zeigt die Feuchtigkeit an
opposite: true,
title: {
text: 'Feuchtigkeit (%)'
},
labels: {
formatter: function () {
return this.value + '%'; // Werte in % anzeigen
}
}
}],
legend: {
layout: 'vertical', // Legenden-Bereich vertikal anordnen
align: 'right', // Legenden-Bereich rechtsbündig ausrichten
verticalAlign: 'middle' // Legenden-Bereich mittig ausrichten
},
series: [{
name: 'Temperatur', // Name der Datenreihe (wird im Legenden-Bereich angezeigt)
data: data.yAxis1, // Daten für die Y-Achse verwenden
color: '#ff0000' // Farbe der Linie (rot)
}, {
name: 'Feuchtigkeit', // Name der Datenreihe (wird im Legenden-Bereich angezeigt)
data: data.yAxis2, // Daten für die Y-Achse verwenden
color: '#0000ff', // Farbe der Linie (blau)
yAxis: 1 // Verwendung der zweiten Y-Achse
}]
});
</script>
</body>
</html>
好吧，我可以可視化每一個 x 軸和 y 軸數據......但是當我嘗試這種方式時，highcharts 不能或使用我以錯誤方式保存的數據（來自 highcharts 的數據表）
我想知道是否有人知道我犯的問題/錯誤或給我提示我如何解決這個問題。 （1 個月 - 許多數據 | 我在 highcharts.com 上搜索但我沒有找到任何東西 | 有效的是每個日期（月）和每個 y 數據（溫度和濕度））
也許我搜索錯了，但如果有人能幫助我，我將不勝感激。
1 個解決方案
解決方案1
0 2023-01-04 12:50:18
這取決於您希望如何顯示數據，但通常您需要調整 Highcharts 所需的系列結構。例如，您可以按以下方式轉換數據結構的一部分：
const series = [
{
name: "Temperature",
data: []
},
{
name: "Feuchtigkeit",
data: []
}
];
const categories = data.xAxis;
data.yAxis1.forEach((dataObj, index) => {
dataObj.data.forEach((value) => {
series[0].data.push([index, value]); // x,y
});
});
實例： https://codesandbox.io/s/cool-wild-7n1w54?file=/index.html
API 參考： https://api.highcharts.com/highcharts/series.line.data
如何使用從兩個不同的mysql表值到x軸和y軸的數據創建php折線圖？
[英]How to create php line chart using data from two different mysql table values to x-axis and y-axis?
用於使用數據時間並將x軸與y軸匹配的折線圖的Hicharts數據API
[英]Hicharts data API for line graph using datatime and matching x-axis to y-axis
如何在高線圖中輸入具有x軸和y軸值的系列數據？
[英]How to feed series data that has x axis and y axis values in line highcharts?
Highcharts-X軸日期格式以及自動縮放（來自mysql的數據）
[英]Highcharts - format date for x-axis as well as autoscale (data from mysql)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.