ChartJS |如何使用MySQL(MariaDB)表和PHP中的数据创建折线图
时间：2020-02-23 14:45:50 来源:igfitidea点击:
在本教程中，我们将学习使用MySQL(MariaDB)表和PHP中的数据创建折线图。
任务
我们的任务是为两个团队-TeamA和TeamB创建折线图。
折线图将显示5场比赛中各支球队的得分，即match1，match2，...，match5。
先决条件
PHP的localhost开发环境。
如果您使用的是Microsoft Windows，则可以使用XAMPP。
如果您使用的是Apple macOS，则可以使用MAMP。
XAMPP和MAMP都将具有PHP和MySQL(MariaDB)，因此您不必分别安装它们。
htdocs
准备好开发环境后，需要将chartjs2项目放置在本地主机的公用文件夹中。
此公用文件夹通常称为htdocs。
项目结构
我们将从以下项目结构开始。
我们有一个css文件夹，其中包含样式表文件。
我们有一个js文件夹，其中包含一些javascript文件。
首先，我们将设置后端部分，即数据库表和服务器端php代码。
matchscore表
在本教程中，我们将使用" matchscore"表。
CREATE TABLE `matchscore` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `team` varchar(20) NOT NULL, `matchname` varchar(20) NOT NULL, `score` int(11) DEFAULT '0', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
然后，我们将在表中插入以下数据。
INSERT INTO matchscore (team, matchname, score) VALUES
('TeamA', 'match1', 10),
('TeamA', 'match2', 50),
('TeamA', 'match3', 25),
('TeamA', 'match4', 70),
('TeamA', 'match5', 40),
('TeamB', 'match1', 20),
('TeamB', 'match2', 35),
('TeamB', 'match3', 40),
('TeamB', 'match4', 60),
('TeamB', 'match5', 50);
data.php
现在，在chartjs2项目文件夹中创建一个新文件夹并将其命名为api，然后在该文件夹中创建一个新文件data.php。
调用该文件时，将返回比赛的球队得分。
<?php
/**
* filename: data.php
* description: this will return the score of the teams.
*/
//setting header to json
header('Content-Type: application/json');
//database
define('DB_HOST', '127.0.0.1');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', 'root123');
define('DB_NAME', 'mydb');
//get connection
$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);
if(!$mysqli){
die("Connection failed: " . $mysqli->error);
}
//query to get data from the table
$query = sprintf("SELECT team, matchname, score FROM matchscore ORDER BY matchname");
//execute query
$result = $mysqli->query($query);
//loop through the returned data
$data = array();
foreach ($result as $row) {
$data[] = $row;
}
//free memory associated with result
$result->close();
//close connection
$mysqli->close();
//now print the data
print json_encode($data);
data.php的输出
当我们调用data.php文件时，将得到以下输出。
现在该是我们从事前端工作的时候了。
在项目文件夹chartjs2中创建一个新的html文件，并在js文件夹中创建一个新的js文件。
我将html文件命名为line-db-php.html，将js文件命名为line-db-php.js。
HTML
打开line-db-php.html文件并编写以下内容。
<!DOCTYPE html>
<html>
<head>
<title>ChartJS - Line</title>
<link href="css/default.css" rel="stylesheet">
</head>
<body>
<div class="chart-container">
<canvas id="line-chartcanvas"></canvas>
</div>
<!-- javascript -->
<script src="js/jquery.min.js"></script>
<script src="js/Chart.min.js"></script>
<script src="js/line-db-php.js"></script>
</body>
</html>
JavaScript
现在打开line-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);
}
}
//get canvas
var ctx = $("#line-chartcanvas");
var data = {
labels : ["match1", "match2", "match3", "match4", "match5"],
datasets : [
{
label : "TeamA score",
data : score.TeamA,
backgroundColor : "blue",
borderColor : "lightblue",
fill : false,
lineTension : 0,
pointRadius : 5
},
{
label : "TeamB score",
data : score.TeamB,
backgroundColor : "green",
borderColor : "lightgreen",
fill : false,
lineTension : 0,
pointRadius : 5
}
]
};
var options = {
title : {
display : true,
position : "top",
text : "Line Graph",
fontSize : 18,
fontColor : "#111"
},
legend : {
display : true,
position : "bottom"
}
};
var chart = new Chart( ctx, {
type : "line",
data : data,
options : options
} );
},
error : function(data) {
console.log(data);
}
});
});
