从MySQL
数据库中获取数据 ，利用chart.js 绘制柱形图。
文件结构：
1.index.PHP文件。从数据库获取数据。先连接数据库exercisedata，然后从数据库的users表中查询学生名字userName和学生的成绩score，并给userName和score取别名label和value，以符合chart.js中绘制图形时需要的数据格式。执行sql语句后，把结果以json格式返回。代码如下：
-
<span style="font-size:18px;"> <?php
-
//数据库配置
-
$dbconf= array(
-
'host'=>'127.0.0.1',
-
'user'=>'root',
-
'password'=>'123456',//因为测试，我就不设置密码，实际开发中，必须建立新的用户并设置密码
-
'dbName'=>'exercisedata',
-
'charSet'=>'utf8',
-
'port'=>'3306' );
-
function openDb($dbConf){ $conn=mysqli_connect($dbConf['host'],$dbConf['user'],$dbConf['password'],$dbConf['dbName'],$dbConf['port']) or die('打开失败');
-
//当然如上面不填写数据库也可通过mysqli_select($conn,$dbConf['dbName'])来选择数据库
-
mysqli_set_charset($conn,$dbConf['charSet']);//设置编码
-
return $conn;
-
}
-
$conn=openDb($dbconf);
-
//2query方法执行增、查、删、改
-
$sql='SELECT userName as `label`, score as `value` FROM exercisedata.users';
-
/*************数据查询***************************/
-
$rs=$conn->query($sql);
-
-
$data=array();//保存数据
-
while($tmp=mysqli_fetch_assoc($rs)){//每次从结果集中取出一行数据
-
$data[]=$tmp;
-
}
-
//对数据进行相应的操作
-
echo json_encode($data);</span>
数据库中的users
访问http://localhost/test/php/index.php 得到如下结果：
则说明数据库连接成功。
2.index.html文件。在<script></script>中引入Chart.js库、index.js文件,
Chart.js是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。在body标签中添加一个canvas标签，用来显示可视化柱形图。代码如下：
-
<!DOCTYPE html>
-
<html lang="zh-cn">
-
-
<head>
-
<meta http-equiv="Content-Type" charset="UTF-8" />
-
<title>案例显示</title>
-
<!-- <link rel="stylesheet" href="../css/ranking.css" /> -->
-
-
-
<style type="text/css">
-
*
-
{
-
margin: 0px;
-
padding: 0px;
-
}
-
-
body
-
{
-
background: #EEE;
-
text-align:center;
-
}
-
-
#drawCanvas
-
{
-
background: white;
-
border: 1px solid #CCC;
-
}
-
</style>
-
</head>
-
-
<body>
-
<script type="text/javascript" src="../js/Chart.js"></script>
-
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
-
<script type="text/javascript" src="../js/index.js"></script>
-
<p>A班成绩表</p>
-
<canvas id="myChart" width="600" height="400"></canvas>
-
</body>
-
-
</html>
3.index.js文件。写一个用来画图的js函数bar，有一个参数Data，然后编写getdatafromDB
函数用ajax 获取php文件中的数据data，并调用bar方法，在window.onload函数中调用getdatafromDB函数。 bar函数分为两部分：一部分数据设置，一部分为显示样式设置。
-
window.onload=function()
-
{
-
getdatafromDB();
-
}
-
-
var getdatafromDB = function(){
-
$.ajax({
-
url: "../php/index.php",
-
type: "POST",
-
dataType:"json",
-
error: function(){
-
alert('Error loading XML document');
-
},
-
success:function(data){
-
console.info(data);
-
bar(data);
-
}
-
});
-
}
-
function bar(Data)
-
{
-
if(Data.length==null || Data.length == 0)
-
return;
-
var barData={};
-
barData.labels=[];
-
barData.datasets=[];
-
var temData={};
-
temData.data=[];
-
temData.fillColor= "rgba(151,187,205,0.5)";
-
temData.strokeColor = "rgba(151,187,205,0.8)";
-
temData.highlightFill="rgba(151,187,205,0.75)",
-
temData.highlightStroke= "rgba(151,187,205,1)";
-
-
for(var i=0;i<Data.length;i++)
-
{
-
barData.labels.push(Data[i].label);
-
temData.data.push(Data[i].value);
-
}
-
barData.datasets.push(temData); //封装一个规定格式的barData。
-
console.info(barData);
-
/ /// 动画效果
-
var options = {
-
scaleOverlay: false,
-
scaleOverride: false,
-
scaleSteps: null,
-
scaleStepWidth: null,
-
scaleStartValue: null,
-
scaleLineColor: "rgba(0,0,0,.1)",
-
scaleLineWidth: 1,
-
scaleShowLabels: true,
-
scaleLabel: "<%=value%>",
-
scaleFontFamily: "'Arial'",
-
scaleFontSize: 12,
-
scaleFontStyle: "normal",
-
scaleFontColor: "#666",
-
scaleShowGridLines: true,
-
scaleGridLineColor: "rgba(0,0,0,.05)",
-
scaleGridLineWidth: 1,
-
bezierCurve: true,
-
pointDot: true,
-
pointDotRadius: 3,
-
pointDotStrokeWidth: 1,
-
datasetStroke: true,
-
datasetStrokeWidth: 2,
-
datasetFill: true,
-
animation: true,
-
animationSteps: 60,
-
animationEasing: "easeOutQuart",
-
onAnimationComplete: null
-
}
-
var ctx = document.getElementById("myChart").getContext('2d');
-
myChart = new Chart(ctx).Bar(barData,options, { //重点在这里
-
responsive : true
-
});
-
}
访问http://localhost/test/html/index.html 测试结果如下：
