体会HTML5的canvas元素之图表练习分享篇

Chart的Java库来自SnazzyAnimated Pie Chart

HTML5实现Chart其实也不难，PHP脚本负责服务器端的数据收集和推送

 

本例使用MS SQL Server 2008R2

Chart_Setout.php

<?php

$connectionInfo = array ("UID" => '《数据库登录帐号》', "PWD" => '《数据库登录密码》', "Database" => "《数据库名称》","CharacterSet" => "UTF-8" );

$serverName = "《服务器名称》";

 

$conn = sqlsrv_connect ($serverName, $connectionInfo );

//phpinfo();

if ($conn) {

    $sql = "select *from dbo.V_L2001";

    $query = sqlsrv_query ( $conn, $sql ) or die ( "Query to get blah failed with error: " . sqlsrv_errors() );

   

    header ( "Content-Type:text/plain;charset=utf-8");

    while ( $row = sqlsrv_fetch_array ( $query,SQLSRV_FETCH_ASSOC ) ) {

       $arr [] = $row;

    }

   

    $jsonencode = json_encode ( $arr );

    echo $jsonencode;

    //print_r($arr);

   

 

    sqlsrv_free_stmt ( $query );

    sqlsrv_close ( $conn );

} else {

    echo "Connection could not be established.\n";

    die ( print_r ( sqlsrv_errors (), true ) );

}

 

?>

 

以上代码很简单，相信你懂的。

 

Javascript部分：

 

$.get("Chart_Setout.php",callback,"json");

 

function callback(data,textStatus,jqXHR){               

                   for(i=0;i<data.length;i++){

                            $("tr#tr"+i+".fenlei").html(data[i].fenlei);

                            $("tr#tr"+i+".jishu").html(data[i].jishu);

                   }

                   //Run the code when the DOM is ready

                   $(pieChart );            

         }

以上一段代码是要获取PHP返回数据。

 

pieChart函数就是Snazzy Animated Pie Chart的内容

 

 

源码：http://download.youkuaiyun.com/detail/les5332295/3816681