Question

我正在尝试从MySQL数据库中获取数据以显示在chart.js区域图中，但我真的不知道从哪里开始以及如何在其中获取数据。希望在这里获得一些帮助？

我希望在600像素宽的图表中获得约600个数据点（无需查看每个数据点的值，这只是一般趋势概述）。

数据点是过去7天的温度读数，在图表下方，我希望在星期一数据点下有1个“ mon”标签，“ tue”有1个标签，依此类推。

此刻是我的代码，它将数据返回到php中的数组中，然后按预期的样子打印出图表，但下面带有虚拟数据和错误的标签：

<?php 
// Connecting to MySQL
$con=mysqli_connect("localhost","user","pass","weather");
// Checking the connection
if (mysqli_connect_errno())
{
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

// Fetching the data needed to show the dashboard
$temperature_result = mysqli_query($con,"SELECT TEMPERATURE FROM weather_data WHERE DATETIME > NOW() - INTERVAL 1 WEEK");
$temperature_array = mysqli_fetch_array($temperature_result);

// Closing the MySQL connection
mysqli_close($con);

?>

<html>
<head>
    <script src="Chart.js"></script>
    <style>
        body {
          background-color: #2e2f31;
          color: #ffffff;
          align: center;
        }
    </style>
</head>
<body>
<table width="600px">
    <tr><td align="center" height"200px">&nbsp;</td></tr>
    <tr>
    <td>
<canvas id="Temperature" width="600px" height="100px"></canvas>
<script>
    var ctx = document.getElementById("Temperature");
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "", "", "", "", "Something"],
            datasets: [{
                data: [12, 19, 3, 5, 2, 12, 12, 34, 21, 5, 10],
                backgroundColor: [
                'rgba(127, 123, 105, 1)'
                ],
                borderColor: [
                    'rgba(241,224,148,1)'
                ],
                borderWidth: 2
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    gridLines: {
                        display:false
                    }
                }],
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    },
                    gridLines: {
                        display:false
                    }
                }]
            },
            legend: {
                display: false
                    },
         tooltips: {
            enabled: false
         },
         elements: { point: { radius: 0 } }
         }
    });
</script>
        </td>
    </tr>
</table>
</body>
</html>

该图表如下所示： Dropbox image

任何帮助将不胜感激！

Chart.js-如何从MySQL获取数据以显示在区域图中？

0 个答案: