ChartJS |如何使用MySQL(MariaDB)表和PHP中的数据创建Donut Chart
时间：2020-02-23 14:45:50 来源:igfitidea点击:
在本教程中，我们将学习使用MySQL(MariaDB)表和PHP中的数据创建甜甜圈图。
任务
我们的任务是为两个团队-TeamA和TeamB创建甜甜圈图。
甜甜圈图将显示5场比赛中球队的得分，即比赛1，比赛2，...，比赛5。
先决条件
PHP的localhost开发环境。
如果您使用的是Microsoft Windows，则可以使用XAMPP。
如果您使用的是Apple macOS，则可以使用MAMP。
XAMPP和MAMP都将具有PHP和MySQL(MariaDB)，因此您不必分别安装它们。
htdocs
准备好开发环境后，需要将chartjs2项目放置在本地主机的公用文件夹中。
此公用文件夹通常称为htdocs。
项目结构
我们将从以下项目结构开始。
我们有一个css文件夹，其中包含样式表文件。
我们有一个js文件夹，其中包含一些javascript文件。
后端部分与本教程相同-ChartJS |如何使用MySQL表和PHP中的数据绘制折线图
现在该是我们从事前端工作的时候了。
在项目文件夹chartjs2中创建一个新的html文件，并在js文件夹中创建一个新的js文件。
我将html文件命名为" doughnut-db-php.html"，将js文件命名为" doughnut-db-php.js"。
HTML
打开doughnut-db-php.html文件，然后编写以下内容。
<!DOCTYPE html>
<html>
<head>
<title>ChartJS - Doughnut</title>
<link href="css/default.css" rel="stylesheet">
</head>
<body>
<div class="chart-container">
<div class="doughnut-chart-container">
<canvas id="doughnut-chartcanvas-1"></canvas>
</div>
<div class="doughnut-chart-container">
<canvas id="doughnut-chartcanvas-2"></canvas>
</div>
</div>
<!-- javascript -->
<script src="js/jquery.min.js"></script>
<script src="js/Chart.min.js"></script>
<script src="js/doughnut-db-php.js"></script>
</body>
</html>
JavaScript
现在打开doughnut-db-php.js文件，并编写以下代码。
$(document).ready(function() {
/**
* call the data.php file to fetch the result from db table.
*/
$.ajax({
url : "http://localhost/chartjs2/api/data.php",
type : "GET",
success : function(data){
console.log(data);
var score = {
TeamA : [],
TeamB : []
};
var len = data.length;
for (var i = 0; i < len; i++) {
if (data[i].team == "TeamA") {
score.TeamA.push(data[i].score);
}
else if (data[i].team == "TeamB") {
score.TeamB.push(data[i].score);
}
}
var ctx1 = $("#doughnut-chartcanvas-1");
var ctx2 = $("#doughnut-chartcanvas-2");
var data1 = {
labels : ["match1", "match2", "match3", "match4", "match5"],
datasets : [
{
label : "TeamA score",
data : score.TeamA,
backgroundColor : [
"#DEB887",
"#A9A9A9",
"#DC143C",
"#F4A460",
"#2E8B57"
],
borderColor : [
"#CDA776",
"#989898",
"#CB252B",
"#E39371",
"#1D7A46"
],
borderWidth : [1, 1, 1, 1, 1]
}
]
};
var data2 = {
labels : ["match1", "match2", "match3", "match4", "match5"],
datasets : [
{
label : "TeamB score",
data : score.TeamB,
backgroundColor : [
"#FAEBD7",
"#DCDCDC",
"#E9967A",
"#F5DEB3",
"#9ACD32"
],
borderColor : [
"#E9DAC6",
"#CBCBCB",
"#D88569",
"#E4CDA2",
"#89BC21"
],
borderWidth : [1, 1, 1, 1, 1]
}
]
};
var options = {
title : {
display : true,
position : "top",
text : "Doughnut Chart",
fontSize : 18,
fontColor : "#111"
},
legend : {
display : true,
position : "bottom"
}
};
var chart1 = new Chart( ctx1, {
type : "doughnut",
data : data1,
options : options
});
var chart2 = new Chart( ctx2, {
type : "doughnut",
data : data2,
options : options
});
},
error : function(data) {
console.log(data);
}
});
});
