【发布时间】：2021-03-17 13:36:20
【问题描述】：
所以我的目标是创建一个 chart.js，其中 x 轴上的标签是 12 个月，y 轴上是每年每个项目的数据。我希望项目拥有数据的所有年份，以不同颜色显示为图例。
所以我的想法是，我必须以某种方式将数据集动态插入到我的图表中。 或者更好的说法是“映射”从数据库到图表上的月份的月份。 但我被卡住了，想不出办法。
非常感谢您的帮助！
这是我目前所拥有的：
queries.php
<?php
$mysqli = new MySQLi("localhost", "root", "", "monitoring_database");
if ($mysqli->connect_errno) {
echo "Failed to connect to MySQL: " . $mysqli->connect_errno;
}
isset($_POST["project"]) ? $project = $_POST["project"] : $project = "";
$ertrag = "";
$month = "";
$year = "";
$combined_data = "";
$bar_graph = "";
$getData = "SELECT
monitoring_database.systems.display_name AS project,
monitoring_database.systems.name AS ShortName,
monitoring_database.systems.collector_area AS Kollektorfläche,
ROUND (AVG(monitoring_database.heat_meter_values.value)) AS Ertrag,
YEAR(monitoring_database.heat_meter_values.timestamp) AS Jahr,
MONTHNAME(monitoring_database.heat_meter_values.timestamp) AS Monat
FROM monitoring_database.systems
INNER JOIN monitoring_database.heat_meter
ON monitoring_database.systems.id = monitoring_database.heat_meter.system_id
INNER JOIN monitoring_database.heat_meter_values
ON monitoring_database.heat_meter.id = monitoring_database.heat_meter_values.heat_meter_id
GROUP BY project, jahr, monat
HAVING ShortName = '$project'";
$rows = $mysqli->query($getData);
$rowcount = $rows->num_rows;
if($rowcount > 0) {
while($r = $rows->fetch_assoc()) {
$ertrag .= '"' . $r["Ertrag"] . '",';
$year .= '"' . $r["Jahr"] . '",';
$month .= '"' . $r["Monat"] . '",';
// $combined_data .= '"' . $r['Jahr'] . '":[' . '"' . $r['Monat'] . '",'. '"' . $r['Ertrag'] . '"}';
}
}
// Array pro Jahr bauen -> {2019: [], 2018: [], 2017: []}
echo print_r($combined_data);
$ertrag = substr($ertrag, 0, -1);
$month = substr($month, 0, -1);
$year = substr($year, 0, -1);
$bar_graph = '
<canvas id="graph" data-settings=
\'{
"type": "bar",
"data":
{
"labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
"datasets":
[{
"label": "' .$project. '",
"backgroundColor": "#000000",
"borderColor": "#000000",
"data": [' . $ertrag . ']
}]
},
"options":
{
"legend":
{
"display": true,
"position": "top"
}
}
}\'
></canvas>';
echo $bar_graph;
也许在我的 querie.php 的 while 循环中添加一个函数，将月份从 db 映射到来自 chart.js 的月份
项目 1 的 $combined_data 的一小部分如下所示：
"2017","August","126783","2017","December","222773","2017","November","219508","2017","October","200562","2017","September"
index.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/materia/bootstrap.min.css" integrity="sha384-B4morbeopVCSpzeC1c4nyV0d0cqvlSAfyXVfrPJa25im5p+yEN/YmhlgQP/OyMZD" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col text-center">
<select class="custom-select" id="selProject">
<option value="IKEA" >Ikea Alexandra</option>
<option value="UWC">United World College</option>
<option value="DMHS">Desert Mountain High School</option>
<option value="MAN">Hospital Managual</option>
<option value="FHW">Fernheizwerk Graz</option>
<option value="WWA">Wasserwerk Andritz</option>
<option value="PRIS">Prishtina</option>
<option value="BERG">Fleischwaren Berger</option>
<option value="ALAIN">Al Ain</option>
<option value="GHS">Gasthaus Schwaab</option>
<option value="AVL" selected="">AVL List</option>
<option value="GROT">Grottenhofstraße</option>
<option value="JUD">Judendorf</option>
<option value="BERL">Berliner Ring</option>
<option value="OBER">Oberzeiring</option>
<option value="COOL">Coolcabin</option>
<option value="DIGI">Digicell</option>
<option value="BRUE">Brüssel</option>
<option value="FKH">Friedrich Karl Höfe</option>
<option value="ERLA">Erlaaer Platz Wien</option>
<option value="ROES">Rösslergasse</option>
<option value="STAD">Stadion Liebenau</option>
<option value="MURZ">Fernwärme Mürzzuschlag</option>
</select>
</div>
</div>
<div class="row">
<div class="col" id="divGraph">
<!-- Graph goes here -->
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
<script>
// Array pro Jahr bauen -> {2019: [], 2018: [], 2017: []}
$(document).ready(function() {
$.ajax({
url: "http://localhost/solid3/queries.php",
type: "post",
data: {
project: "AVL"
},
success: function (bar_graph){
$("#divGraph").html(bar_graph);
$("#graph").chart = new Chart($("#graph"), $("#graph").data("settings"));
}
});
$("#selProject").change(function() {
$.ajax({
url: "http://localhost/solid3/queries.php",
type: "post",
data: {
project: $(this).val()
},
success: function (bar_graph){
$("#divGraph").html(bar_graph);
$("#graph").chart = new Chart($("#graph"), $("#graph").data("settings"));
}
})
});
});
</script>
</body>
</html>
【问题讨论】：
标签： javascript php sql chart.js