Chart.js 使用示例
从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 测试结果如下：