在chart.jsjavascript中显示php数组数据

Question

我正在尝试使用 chart.js 显示图表，图表数据将从 php mysql 数据库中获取并显示到下面的函数中；

const pieChart2 = new Chart(document.getElementById('chats'), {
  type: 'pie',
  data: {
    labels: ['John Mark', 'Sandra Friday', 'Kelvin Russel'], //php code to display data
    datasets: [{
      data: [25, 12, 4], //php code to display data
      backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
      hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
    }]
  },
  options: {
    responsive: true
  }
});

我能够从我的数据库中获取数据

$rscht = mysqli_query($conn,"SELECT users.name, COUNT(*) AS times FROM chat_logs INNER JOIN users ON chat_logs.sender_email = users.email GROUP BY chat_logs.sender_email ORDER BY times DESC");

我还可以使用 jsonencode

将数据转换为 php 数组

<?php 
    $chatstack = array(); 
    while($userchat= mysqli_fetch_array($rscht)){
   
    $chatstackitem['label'] = $userchat['name'];
    $chatstackitem['value'] = $userchat['times'];
    array_push( $chatstack, $chatstackitem );
    }
    $chatArray = json_encode( $chatstack );
    print_r( $chatArray );

    ?>

上面的结果给了我

  <canvas id="chats"></canvas>
[{"label":"John Mark","value":"25"},{"label":"Sandra Friday","value":"12"},{"label":"Kelvin Russel","value":"4"}]

我现在的问题是，如何显示 php 代码，该代码显示标签中的所有名称（标签）数组：section

labels: ['John Mark', 'Sandra Friday', 'Kelvin Russel'], //php code to display data

并显示 php 显示数据部分中值的代码

 data: [25, 12, 4], //php code to display data

Answer 1

所以PHP是后端服务器端技术，JS在这个上下文中只是客户端上下文。 PHP 将允许您将此 json 编码数据打印到脚本块中，该脚本块将允许您将此数据分配给 JS 变量。

或者，您可以使用 cookie 来存储此数据并从那里读取。

Answer 2

您需要分别提供标签和数据。您可以为此在循环中创建两个变量：

$chatLabels = []; 
$chatData = [];
while ($userchat= mysqli_fetch_array($rscht)) {
      $chatLabels[] = $userchat['name'];
      $chatData[] = $userchat['times'];
}
$chatLabelsJson = json_encode($chatLabels); // ["John Mark","Sandra Friday","Kelvin Russel"]
$chatDataJson = json_encode($chatData); //["25","12","4"]

或者，您可以使用 array_column 从现有的 $chatstack 数组中提取数据：

$chatLabels = array_column($chatstack, 'label');
$chatData = array_column($chatstack, 'value');
$chatLabelsJson = json_encode($chatLabels); // ["John Mark","Sandra Friday","Kelvin Russel"]
$chatDataJson = json_encode($chatData); //["25","12","4"]

在chart.jsjavascript中显示php数组数据

Display php array data in chart.js javascript

javascript

php

mysql

arrays

chart.js