如何解决使用chart.js,php和mysql创建分组栏
我在mysql中有这样的表maximum_user:
并且我想使用chart.js创建分组栏。
我已经创建了这样的代码:
<html>
<head>
<script src="Chart.min.js"></script>
</head>
<body>
<center>
<?php
include 'conn.php';
$sql = "Select date,user,sum(total) as total from user_biggest group by date,user";
# $sql = "SELECT difference,date FROM `biggest_user`";
$date = $conn->query($sql);
$user = $conn->query($sql);
$total = $conn->query($sql);
?>
<canvas id="bar-chart-grouped" width="1000" height="250"></canvas>
<script>
new Chart(document.getElementById("bar-chart-grouped"),{
type: 'bar',data: {
labels: [<?php while($a = mysqli_fetch_array($date)) { echo '"' . $a['date'] . '",'; } ?>],datasets: [
{
label: "Total",backgroundColor: "#3e95cd",data: [<?php while($b = mysqli_fetch_array($total)) { echo $b['total'] . ','; } ?>]
},{
label: "User",backgroundColor: "#8e5ea2",data: [<?php while($c = mysqli_fetch_array($user)) { echo $b['user'] . ','; } ?>]
}
]
},options: {
title: {
display: true,text: 'Biggest User (Megabytes)'
}
}
});
</script>
但是结果图表如下:
我认为它不是分组条形图。但是我不知道我的代码有什么问题。
解决方法
很遗憾,我对php
知之甚少。因此,我只能部分回答您的问题。
data.labels
应该包含每天的条目。您还需要为每个用户提供一个dataset
,就是这样。
请查看下面的代码段,看看它如何工作。
new Chart("chart",{
type: 'bar',data: {
labels: ["01-Sep-20","02-Sep-20","03-Sep-20"],datasets: [{
label: "cs",backgroundColor: "red",data: [229,200,198]
},{
label: "finance",backgroundColor: "green",data: [162,150,178]
},{
label: "credit",backgroundColor: "blue",data: [89,156,90]
},{
label: "it",backgroundColor: "orange",55,112]
}]
},options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="90"></canvas>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。