Chart.js 使用示例

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

文件结构：

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

 '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);

数据库中的users

访问http://localhost/test/php/index.php 得到如下结果：

则说明数据库连接成功。 

2.index.html文件。在<script>script>中引入Chart.js库、index.js文件, Chart.js是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。在body标签中添加一个canvas标签，用来显示可视化柱形图。代码如下：

    
    
    






    
        
    
    
A班成绩表
    

3.index.js文件。写一个用来画图的js函数bar，有一个参数Data，然后编写getdatafromDB 函数用ajax 获取php文件中的数据data，并调用bar方法，在window.onload函数中调用getdatafromDB函数。 bar函数分为两部分：一部分数据设置，一部分为显示样式设置。

	 window.οnlοad=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",
        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 测试结果如下：