Highcharts 的簡單使用

今天找了一天的jquery圖表插件，弄了一整天的Highcharts，記下來以備下次用到,我用的比較簡單的，顯示年份內的每個月的用戶注冊量，數據表詳細就不用了，SQL執行后的效果是：

后臺operate.php文件內容是這樣：

if ($Gaction == 'getchart'){  //這等同于$_GET['action'] == 'getchart'
    $query = $db->result_array("select DATE_FORMAT(from_unixtime(finishtime),'%Y') as years, DATE_FORMAT(from_unixtime(finishtime),'%c') as months,count(rid) as count from 2x3_servrecord where DATE_FORMAT(from_unixtime(finishtime),'%Y') = '2012' group by months ");  //這是用到自定義的一個mysql類
    $count = array('0','0','0','0','0','0','0','0','0','0','0','0'); //這是先自定義的12個月的數組
    if ($query){
    foreach ($query as $row){
        $count[$row['months']] = $row['count'];
    }
    }
    echo json_encode($count);       
}

前臺展示要加載的兩個JR文件就不列出來了，圖表的JS是：

<script type="text/javascript">
<!--
$(function () {
    var chart;
    var options;
    $(document).ready(function() {
        var count;
        options = {
            chart: {
                renderTo: 'container1',
                type: 'column'
            },
            title: {
                text: '深圳二乘三科技技術有限公司'
            },
            subtitle: {
                text: '統計圖'
            },
            xAxis: {
                categories: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
            },
            yAxis: {
                min: 0,
                title: {
                    text: '次數'
                }
            },
            legend: {
                layout: 'vertical',
                backgroundColor: '#FFFFFF',
                align: 'left',
                verticalAlign: 'top',
                x: 100,
                y: 70,
                floating: true,
                shadow: true
            },
            tooltip: {
                formatter: function() {
                    return ''+
                        this.x +': '+ this.y +' 次';
                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
                series: []
        };
        $.getJSON('index.php?m=2x3&a=operate',{
            'action':'getchart'
            },function(data){       
            var series = { // <-------------------- create just one series object
             type: 'column',
            name: '2012',
            data: [] //data array for new series
        };               
        var i=0;
        for(i=0;i<=11;i++){
            var j =parseInt(data[i]);  //這個很重要，TNN的，弄了我好幾小時才發現
            series.data.push(j);
        }
         options.series.push(series); // <-------- pushing series object
        var chart = new Highcharts.Chart(options);  
             });
    });   
});
//-->
</script>

圖表的HTML顯示是:

<div id="container1" style="min-width: 400px; height: 400px;margin:0 auto"></div>

最后顯示效果圖：

數據有點少哈~

這個最難弄的就是從數據庫中取出數據后怎么放入series: []里了，這個只是簡易的2012的柱圖，其它的可以觸類旁通吧~

參考地址：http://stackoverflow.com/questions/7810098/php-json-highcharts-load-database-result

 ps:$count[$row['months']] = $row['count'];應改為$count[$row['months']-1] = $row['count'];不然就跳了一個月，2月數據跑到3月份顯示去了~