时间戳

首页 > 解决方案 > 如何使用 Chart.js 将所有相关数据显示到同一图表上的一个特定项目？

javascript - 如何使用 Chart.js 将所有相关数据显示到同一图表上的一个特定项目？

问题描述

所以我有以下场景：

我首先必须从下拉列表中选择我的项目，然后生成一个包含与项目相关的所有数据的图表。

ATM：我的图表是这样的，红色是我选择要显示的项目 在此处输入图像描述

这就是我想要的样子。正如你所看到的，它有所有年份的数据作为右侧的标签，月份总是在底部。（蓝色）我该如何处理这样的事情？ 在此处输入图像描述

这是我的 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" style="margin-top: 25px; margin-bottom: 25px;">
                <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>

        $(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>

这是我的querys.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 = "";
$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'] . '",';
        $month .= '"' . $r["Monat"] . '",';
    }
}

$ertrag = substr($ertrag, 0, -1);
$month = substr($month, 0, -1);
$bar_graph = '
<canvas id="graph" data-settings=
\'{
"type": "bar",
"data":
{
    "labels": [' . $month . '],
    "datasets":
        [{
            "label": "' . $project . '",
            "backgroundColor": "#000000",
            "borderColor": "#000000",
            "data": [' . $ertrag . ']
        }]
    },
    "options":
    {
        "legend":
        {
            "display": true
        }
    }
}\'
></canvas>';

echo $bar_graph;

标签： javascriptphpchart.js

解决方案

推荐阅读