我正在嘗試使用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
uj5u.com熱心網友回復：
所以 PHP 是一種后端服務器端技術，在這個背景關系中 JS 是一個客戶端唯一的背景關系。PHP 將允許您將此 json 編碼資料列印到腳本塊中，該腳本塊將允許您將此資料分配給 JS 變數。
或者，您可以使用 cookie 來存盤這些資料并從那里讀取它。
uj5u.com熱心網友回復：
您需要分別提供標簽和資料。您可以為此在回圈中創建兩個變數：
$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"]
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/339087.html
標籤：javascript php mysql 数组 图表.js