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表
在本教程中，我们将考虑一个非常简单的关注者表，该表具有四列userid，facebook，twitter，googleplus和3个条目。
followers表
CREATE TABLE `followers` (
`userid` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
`facebook` INT(11) DEFAULT '0',
`twitter` INT(11) DEFAULT '0',
`googleplus` INT(11) DEFAULT '0',
PRIMARY KEY (`userid`)
) ENGINE=INNODB DEFAULT CHARSET=UTF8;
followers表数据
INSERT INTO `followers` VALUES (1, 100, 200, 80), (2, 60, 150, 180), (3, 50, 90, 120);
创建一个新项目
创建一个新的项目文件夹，并将其命名为chartjs。
注意！根据您的选择随意命名您的项目。
在chartjs项目文件夹中，创建一个子文件夹并将其命名为js。
这将保存所有的javascript文件。
在js文件夹中移动JS文件
将Chart.min.js和jquery.min.js文件复制到我们在chartjs项目文件夹中创建的js文件夹中。
并在js文件夹中创建一个linegraph.js文件。
这将包含我们将为此项目编写的所有javascript代码。
创建followersdata.php文件以从MySQL表中获取数据
在chartjs文件夹中创建一个新文件followersdata.php。
该文件将包含php代码，该代码将从followers表中获取数据并以JSON格式显示。
档案：followersdata.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 userid, facebook, twitter, googleplus FROM followers");
//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);
followersdata.php文件的输出
要获取data.php文件的输出，请在网络浏览器(例如Chrome)中将其打开
网址：localhost/chartjs/followersdata.php
[
{
"userid" : "1",
"facebook" : "100",
"twitter" : "200",
"googleplus" : "80"
},
{
"userid" : "2",
"facebook" : "60",
"twitter" : "150",
"googleplus" : "180"
},
{
"userid" : "3",
"facebook" : "50",
"twitter" : "90",
"googleplus" : "120"
}
]
创建linegraph.html文件以显示折线图
现在，在chartjs项目文件夹中创建一个新文件，并将其命名为linegraph.html。
此文件将显示折线图。
文件：linegraph.html
<!DOCTYPE html>
<html>
<head>
<title>ChartJS - LineGraph</title>
<style>
.chart-container {
width: 640px;
height: auto;
}
</style>
</head>
<body>
<div class="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/linegraph.js"></script>
</body>
</html>
在linegraph.js中编写一些JavaScript
我们将从linegraph.js文件到followersdata.php文件进行AJAX调用，以获取用于绘制折线图的JSON数据。
文件：linegraph.js
$(document).ready(function(){
$.ajax({
url : "http://localhost/chartjs/followersdata.php",
type : "GET",
success : function(data){
console.log(data);
var userid = [];
var facebook_follower = [];
var twitter_follower = [];
var googleplus_follower = [];
for(var i in data) {
userid.push("UserID " + data[i].userid);
facebook_follower.push(data[i].facebook);
twitter_follower.push(data[i].twitter);
googleplus_follower.push(data[i].googleplus);
}
var chartdata = {
labels: userid,
datasets: [
{
label: "facebook",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(59, 89, 152, 0.75)",
borderColor: "rgba(59, 89, 152, 1)",
pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
pointHoverBorderColor: "rgba(59, 89, 152, 1)",
data: facebook_follower
},
{
label: "twitter",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(29, 202, 255, 0.75)",
borderColor: "rgba(29, 202, 255, 1)",
pointHoverBackgroundColor: "rgba(29, 202, 255, 1)",
pointHoverBorderColor: "rgba(29, 202, 255, 1)",
data: twitter_follower
},
{
label: "googleplus",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(211, 72, 54, 0.75)",
borderColor: "rgba(211, 72, 54, 1)",
pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
pointHoverBorderColor: "rgba(211, 72, 54, 1)",
data: googleplus_follower
}
]
};
var ctx = $("#mycanvas");
var LineGraph = new Chart(ctx, {
type: 'line',
data: chartdata
});
},
error : function(data) {
}
});
});
