时间戳

首页 > 解决方案 > 在chart.js javascript中显示php数组数据

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

问题描述

我正在尝试使用 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

标签： javascriptphpmysqlarrayschart.js

解决方案

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

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

推荐阅读