javascript - 如何从mysql检索数据到chart.js
问题描述
我想用chart.js 创建一个饼图,但它不能显示图表。我花了一天的时间试图解决这个问题,但没有好的结果。我希望有一个人可以帮助我。
我的数据库有不同的公司,我需要计算每个公司的总销售额并显示在饼图中。
我认为问题是$results_sum = "SELECT SUM(total_of_gp_fee) AS Total FROM gp WHERE cshortcut
=$subjectData('cshortcut')"; ,因为不同公司有很多销售记录,我不确定这是否是正确的代码。
<?php
include_once("connection.php");
$results_sum = "SELECT cshortcut,SUM(total_of_gp_fee) AS Total FROM gp GROUP BY cshortcut";
$result_sum = mysqli_query($conn, $results_sum) or die("error to fetch data");
if ($result_sum->num_rows > 0) {
// output data of each row
$labels = $data = '';
while($row = $result_sum->fetch_assoc()) {
//get the company name separated by comma for chart labels
$labels.= '"' .$row["cshortcut"]. '",';
//get the total separated by comma for chart data
$data.= $row["Total"].',';
}
}?>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<script src="chart/Chart.bundle.js"></script>
</head>
<body>
<div class="container">
<canvas id="myChart" width="300" height="100"></canvas>
</div>
脚本部分
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: [<?php echo trim($labels);?>],
datasets: [{
label: '# of Votes',
data: [<?php echo trim($data);?>],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
//Add the tooltips
tooltips: {
callbacks: {
label: function(tooltipItem) {
return "€ " + Number(tooltipItem.yLabel);
}
}
},
}
},
);
</script>
解决方案
1-按公司获取total_of_gp_fee组的公司名称和SUM。
include_once("connection.php");
//get the company name and total_of_gp_fee of that company.
$results_sum = "SELECT cshortcut,SUM(total_of_gp_fee) AS Total FROM gp GROUP BY cshortcut";
$result_sum = mysqli_query($conn, $results_sum) or die("error to fetch data");
if ($result_sum->num_rows > 0) {
// output data of each row
$labels = $data = '';
while($row = $result_sum->fetch_assoc()) {
//get the company name separated by comma for chart labels
$labels.= '"' .$row["cshortcut"]. '",';
//get the total separated by comma for chart data
$data.= $row["Total"].',';
}
}
2- 更新图表中标签和数据的值。
labels: [<?php echo trim($labels);?>],
datasets: [{
label: '# of Votes',
data: [<?php echo trim($data);?>],
3-添加条形图的工具提示。
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
//Add the tooltips
tooltips: {
callbacks: {
label: function(tooltipItem) {
return "€" + Number(tooltipItem.yLabel);
}
}
},
}
4-为饼图添加工具提示。
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var allData = data.datasets[tooltipItem.datasetIndex].data;
var tooltipData = allData[tooltipItem.index];
var total = 0;
for (var i in allData) {
total += allData[i];
}
var tooltipPercentage = Math.round((tooltipData / total) * 100);
return "€" + ': ' + tooltipData + ' (' + tooltipPercentage + '%)';
}
}
},
推荐阅读
- templates - 模板中除最后一项之外的所有内容的 Wagtail 基本菜单分隔符
- kubernetes - 由于 GCP 服务帐户,Pod 在 Kubernetes 中获得了 CrashLoopBackOff
- sql-server - 计数日的 T-SQL 脚本
- python - 如何使对象在 tkinter 中不断移动
- html - 响应式缩放绝对定位的元素
- jquery - 有没有办法旋转 HTML 选择框的内容?
- unreal-engine4 - 为多个网格创建通用蓝图
- reactjs - 在 Sagas 测试中没有调用我的模拟函数
- regex - 用于基于多个值进行过滤的正则表达式
- python - Cocotb 协程从未调用过