ChartJS |如何使用MySQL表和PHP中的数据绘制条形图
时间：2020-02-23 14:45:50 来源:igfitidea点击:
在本教程中，我们将学习使用MySQL表和PHP中的数据绘制条形图。
前提条件
我们将需要以下各项来完成本教程。
- 文本编辑器(例如SublimeText，TextMate，Coda，NotePad ++)或者IDE(例如Eclipse)
- Web浏览器，例如Chrome或者Firefox
- 本地主机上的PHP开发环境。
为此，您可以使用XAMPP(Windows/Linux/OS X用户)或者MAMP(Windows/OS X用户) - MySQL
- ChartJS
- jQuery的
所以开始吧...
MySQL表
在本教程中，我们将考虑一个非常简单的分数表，该表具有两列playerid，score和5个条目。
分数表
CREATE TABLE `score` ( `playerid` int(10) unsigned NOT NULL AUTO_INCREMENT, `score` int(11) DEFAULT '0', PRIMARY KEY (`playerid`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
score表数据
INSERT INTO `score` VALUES (1,10),(2,40),(3,20),(4,9),(5,20);
创建一个新项目
创建一个新的项目文件夹，并将其命名为chartjs。
注意！根据您的选择随意命名您的项目。
在chartjs项目文件夹中，创建一个子文件夹并将其命名为js。
这将保存所有的javascript文件。
在js文件夹中移动JS文件
将Chart.min.js和jquery.min.js文件复制到我们在chartjs项目文件夹中创建的js文件夹中。
并在js文件夹中创建一个app.js文件。
这将包含我们将为此项目编写的所有javascript代码。
创建data.php文件以从MySQL表中获取数据
在chartjs文件夹中创建一个新文件data.php。
该文件将包含php代码，这些代码将从成绩表中获取数据并以JSON格式显示。
文件：data.php
<?php
//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 playerid, score FROM score ORDER BY playerid");
//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文件的输出，请在网络浏览器(例如Chrome)中将其打开
网址：localhost/chartjs/data.php
[
{
"playerid":"1",
"score":"10"
},
{
"playerid":"2",
"score":"40"
},
{
"playerid":"3",
"score":"20"
},
{
"playerid":"4",
"score":"9"
},
{
"playerid":"5",
"score":"20"
}
]
创建bargraph.html文件以显示条形图
现在，在chartjs项目文件夹中创建一个新文件，并将其命名为bargraph.html，该文件将显示条形图。
文件：bargraph.html
<!DOCTYPE html>
<html>
<head>
<title>ChartJS - BarGraph</title>
<style type="text/css">
#chart-container {
width: 640px;
height: auto;
}
</style>
</head>
<body>
<div id="chart-container">
<canvas id="mycanvas"></canvas>
</div>
<!-- javascript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
在app.js中编写一些JavaScript
我们将从app.js文件到data.php文件进行AJAX调用，以获取用于绘制条形图的JSON数据。
文件：app.js
$(document).ready(function(){
$.ajax({
url: "http://localhost/chartjs/data.php",
method: "GET",
success: function(data) {
console.log(data);
var player = [];
var score = [];
for(var i in data) {
player.push("Player " + data[i].playerid);
score.push(data[i].score);
}
var chartdata = {
labels: player,
datasets : [
{
label: 'Player Score',
backgroundColor: 'rgba(200, 200, 200, 0.75)',
borderColor: 'rgba(200, 200, 200, 0.75)',
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: score
}
]
};
var ctx = $("#mycanvas");
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata
});
},
error: function(data) {
console.log(data);
}
});
});
