ChartJS 数组作为一个项目

Question

我正在尝试从 mySQL 数据库导入读数，并将它们放在 ChartJS 上。

$query = mysqli_query($conn, "SELECT * FROM readings 
ORDER BY readings_id DESC LIMIT 2");

$distance = array();
$timestamp = array();
while($row = mysqli_fetch_array($query)) {
   $distance[] = $row['river_height'];
   $time[] = $row['time_stamp'];
}

这是我正在使用的查询以及我将读数存储在数组中的方法。

但是，例如，当我尝试将它们放在条形图中时，这 2 个读数将作为一个读数。我有如下 Javascript 代码：

const time = <?php echo json_encode($time); ?>;
var canvasElement = document.getElementById("chart");

var config = {
   type: 'bar',
   data: {
      labels: [time],
      datasets: [{data:[10, 20]}],
   }
}

我已经尝试了很多东西，但无法弄清楚。我对此很陌生，所以没有帮助。任何建议或帮助将不胜感激。

Answer 1

假设您希望 time_stamp 作为 X 轴，river_height 作为 Y 轴，更改为：

PHP :

while($row = mysqli_fetch_array($query)) {
   $data[] = [
      'x' => $row['time_stamp'],
      'y' => $row['river_height']
   ];
}

JavaScript :

var config = {
   type: 'bar',
   data: {
      datasets: [{
         data: <?= json_encode($data) ?>
      }]
   }
};

Answer 2

发生这种情况是因为您的 PHP 正在为标签返回一个数组，然后您将该数组放入另一个数组中。如您所见，这告诉 chart.js 它必须是多行标签。要获得您想要的行为，您需要像这样删除标签字段中的数组括号：

const time = <?php echo json_encode($time); ?>;
var canvasElement = document.getElementById("chart");

var config = {
   type: 'bar',
   data: {
      labels: time, // remove array brackets around time
      datasets: [{data:[10, 20]}],
   }
}

ChartJS 数组作为一个项目

ChartJS Arrays Acting as One Item

html

php

mysql

arrays

chart.js