Question

我尝试创建一个表，该表从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>

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

Answer 1

由于输出不是整数，而是时间（“ 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>

Answer 2

您的$ res4是一个字符串数组，而不是日期，因此labels: [<?php echo $res4; ?>],类似于：

labels: [10:00:01, 10:00:02, 10:00:03, ...]

由于SyntaxError，JavaScript无法读取它。您可能需要将$ res4放入一个临时数组，然后将其解析为时间，然后再将其分配给标签。但在此之前，您需要像这样引用$chronos[$x]：

...
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, ', ');
...

然后在您的前端

var temp = [<?php echo $res4 ?>];
// parse your time here

希望获得帮助。

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

2 个答案: