使用 MySQL 數據更新 ChartJS

Question

我想每隔 x 秒用我的 MySQL 數據庫中的新數據更新我的 ChartJS。 圖表效果很好，但我不明白如何讓圖表更新數據。

讀取兩個溫度傳感器的 Python 腳本正在填充數據庫。 canvasjs 是更好的解決方案嗎？

數據.php：

<?php
header('Content-Type: application/json');

$conn = mysqli_connect("localhost","user","password","db");

$sqlQuery = "SELECT id,temp1,temp2 FROM table.results ORDER BY id";

$result = mysqli_query($conn,$sqlQuery);

$data = array();
foreach ($result as $row) {
    $data[] = $row;
}

mysqli_close($conn);

echo json_encode($data, JSON_NUMERIC_CHECK);
?>

index.php

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>

</head>
<body>
    <div id="chart-container">
        <canvas id="graphCanvas"></canvas>
    </div>

    <script>
        $first = true;

        $(document).ready(function () {
            showGraph();
        });


        function showGraph()
        {
            {
                $.post("data.php",
                function (data)
                {
                    console.log(data);
                     var id = [];
                     var temp1 = [];
                     var temp2 = [];

                    for (var i in data) {
                        id.push(data[i].id);
                        temp1.push(data[i].temp1);
                        temp2.push(data[i].temp2);
                    }

                    var chartdata = {
                        labels: id,
                        datasets: [
                            {
                                label: 'Temp1',
                                borderColor: '#46d5f1',
                                hoverBorderColor: '#666666',
                                data: temp1
                            }, {
                                label: 'Temp2',
                                borderColor: '#46d5f1',
                                hoverBorderColor: '#666666',
                                data: temp2
                            }
                        ]
                    };

                      var graphTarget = $("#graphCanvas");
                      var barGraph = new Chart(graphTarget, {
                          type: 'line',
                          data: chartdata
                    });



                });
            }
            setInterval(showGraph, 5000);
        }
        </script>

現在數據每 5 秒更新一次，但是當我訪問此頁面時，我的瀏覽器負載過重。 這個問題的任何提示？ 當數據重新加載時，還有一個 animation。 如何禁用它？

Answer 1

使用setInterval不斷調用你的showGraph怎么樣？

setInterval(showGraph, 5000); // 5 seconds

Answer 2

您可以使用 CanvasJS 從 MySQL 數據庫中的數據輕松創建動態圖表。 這是您可以參考的示例項目。

使用 MySQL 數據更新 ChartJS

問題描述

2 個解決方案

解決方案1
0 2020-11-28 22:53:38

解決方案2
0 2020-12-03 11:10:42

使用 MySQL 數據更新 ChartJS

問題描述

2 個解決方案

解決方案1 0 2020-11-28 22:53:38

解決方案2 0 2020-12-03 11:10:42

解決方案1
0 2020-11-28 22:53:38

解決方案2
0 2020-12-03 11:10:42