时间戳

首页 > 解决方案 > Chart.js 无法从 php 中读取元素作为标签

javascript - Chart.js 无法从 php 中读取元素作为标签

问题描述

我尝试创建一个从 mySQL 数据库获取数据的表。一切正常，除非我尝试使用时间作为图表的标签。
这是PHP的代码：

<?php
// set arrays
$temp = array();
$humi = array();
$id = array();
$chronos = array();
// get
$query = "SELECT * FROM temp_humi";
$result = mysqli_query($connection, $query);
// transfer arrays
while($row = mysqli_fetch_assoc($result)) {
    $temp[] = $row["temp"];
    $humi[] = $row["humi"];
    $id[] = $row["id"];
}

// set variables
$res1;
$res2;
$res3;
$res4;
$len1 = count($temp);
$len2 = count($humi);
$len3 = count($id);
// input elements into variables
for($x = $len1 - 10; $x < $len1; $x++) {
    $res1 .= $temp[$x] . ', ';
}
for($x = $len2 - 10; $x < $len2; $x++) {
    $res2 .= $humi[$x] . ', ';
}
for($x = $len3 - 10; $x < $len3; $x++) {
    $res3 .= $id[$x] . ', ';
}
//set timezone
date_default_timezone_set("Asia/Manila");
// set time
$date = date("H:i:s");
$time = strtotime($date);
$time = $time - 20;
// iterate time into array
for($y = 0; $y < 10; $y++) {
    $time = $time + 2;
    $date = date("H:i:s", $time);
    array_push($chronos, $date);
}
// iterate timesinto variables
for($x = 0; $x < 10; $x++) {
    $res4 .= $chronos[$x] . ', ';
}
// trim last comma
$res1 = rtrim($res1, ', ');
$res2 = rtrim($res2, ', ');
$res3 = rtrim($res3, ', ');
$res4 = rtrim($res4, ', ');
?>


我使用数组从 mySQL 数据库输入所有数据，然后将数组的元素放入一个变量中，以便我可以在图表中将其作为数据和标签的值调用。虽然这是我在另一个 php 文件中的图表代码：

<script>
        var ctx = document.getElementById("myChart");
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [<?php echo $res4; ?>],
                datasets: [{
                    label: 'Temperature',
                    fill: false,
                    data: [<?php echo $res1; ?>],
                    borderColor: ['rgba(255,99,132,1)'],
                    borderWidth: 1,
                    pointBackgroundColor: [...]
                }, {
                    label: 'Humidity',
                    fill: false,
                    data: [<?php echo $res2; ?>],
                    borderColor: ['rgba(54,162,235,1)'],
                    borderWidth: 1,
                    pointBackgroundColor: [...]
                }]
            }
        });
    </script>


当我尝试使用 id 作为标签的值（名为 $res3 的标签）时，它工作得很好。但是当我尝试将时间用作标签（$res4）时，页面变为空。
请帮我。我尝试使用 (string)$var 和 strval($var) 将时间值转换为字符串，因为我认为这是因为时间不是字符串，但它不起作用。请帮忙。我刚开始使用 Chart.js

标签： javascriptphpchart.js

解决方案

由于输出不是整数，而是时间（“16:44:04”），因此不能将其放在不带引号的数组中。

$res4 .= '"'.$chronos[$x] . '", ';

作为一种更通用的方法，我不建议您使用字符串连接，而是使用 PHP 数组，然后将它们内爆。这避免了必须修剪最后一个逗号。

$res1 = [];
$res2 = [];
$res3 = [];
$res4 = [];
$len1 = count($temp);
$len2 = count($humi);
$len3 = count($id);
// input elements into variables
for($x = $len1 - 10; $x < $len1; $x++) {
    $res1[] = $temp[$x];
}
for($x = $len2 - 10; $x < $len2; $x++) {
    $res2[] = $humi[$x];
}
for($x = $len3 - 10; $x < $len3; $x++) {
    $res3[] = $id[$x];
}
//set timezone
date_default_timezone_set("Asia/Manila");
// set time
$date = date("H:i:s");
$time = strtotime($date);
$time = $time - 20;
// iterate time into array
for($y = 0; $y < 10; $y++) {
    $time = $time + 2;
    $date = date("H:i:s", $time);
    array_push($chronos, $date);
}
// iterate timesinto variables
for($x = 0; $x < 10; $x++) {
    $res4[] = '"'.$chronos[$x].'"';
}
?>

接着

<script>
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [<?php echo implode(",", $res4); ?>],
            datasets: [{
                label: 'Temperature',
                fill: false,
                data: [<?php echo implode(",", $res1); ?>],
                borderColor: ['rgba(255,99,132,1)'],
                borderWidth: 1,
                pointBackgroundColor: [...]
            }, {
                label: 'Humidity',
                fill: false,
                data: [<?php echo implode(",", $res2); ?>],
                borderColor: ['rgba(54,162,235,1)'],
                borderWidth: 1,
                pointBackgroundColor: [...]
            }]
        }
    });
</script>

推荐阅读