在chart.js javascript中显示php数组数据

Posted 2023-02-14

【中文标题】在chart.js javascript中显示php数组数据

【英文标题】：Display php array data in chart.js javascript

【发布时间】：2021-12-13 00:00:16

【问题描述】：

我正在尝试使用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 代码：部分

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

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

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

【问题讨论】：

你的具体问题是？你检查过所有的错别字吗？

@hakre 问题是在需要的地方显示标签和值的 php 代码是什么

所以chart.js 对您有利，问题在于从$chatstack 数组（数组）中提取所有标签？你知道 PHP 中的array_column() function 吗？ Example #1 从记录集中获取名字列你应该在那里加快速度。

不是真的 @hakre 你的帮助将不胜感激

聊天完美。我需要做的就是输入 php 代码以从数据库中获取数据

【参考方案1】：

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

$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"]

【讨论】：

谢谢大家的帮助。

【参考方案2】：

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

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