Chart.js 使用示例

从MySQL 数据库中获取数据，利用chart.js 绘制柱形图。

文件结构：

1.index.PHP文件。从数据库获取数据。先连接数据库exercisedata，然后从数据库的users表中查询学生名字userName和学生的成绩score，并给userName和score取别名label和value，以符合chart.js中绘制图形时需要的数据格式。执行sql语句后，把结果以json格式返回。代码如下：

[html]view plain copy 
    
 <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标签，用来显示可视化柱形图。代码如下：

[html]view plain copy 
    
 <!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函数分为两部分：一部分数据设置，一部分为显示样式设置。

[html]view plain copy 
    
      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 测试结果如下：

猜你喜欢