Highcharts的简单使用

今天找了一天的jquery图表插件，弄了一整天的Highcharts，记下来以备下次用到,我用的比较简单的，显示年份内的每个月的用户注册量，数据表详细就不用了，SQL执行后的效果是：

后台operate.php文件内容是这样：

1if ($Gaction == 'getchart'){  //这等同于$_GET['action'] == 'getchart'
2    $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类
3    $count = array('0','0','0','0','0','0','0','0','0','0','0','0'); //这是先自定义的12个月的数组
4    if ($query){
5	foreach ($query as $row){
6		$count[$row['months']] = $row['count'];
7	}
8    }
9    echo json_encode($count);		
10}

前台展示要加载的两个JR文件就不列出来了，图表的JS是：

1<script type="text/javascript">
2<!--
3$(function () {
4    var chart;
5    var options;
6    $(document).ready(function() {
7        var count;
8        options = {
9            chart: {
10                renderTo: 'container1',
11                type: 'column'
12            },
13            title: {
14                text: '深圳二乘三科技技术有限公司'
15            },
16            subtitle: {
17                text: '统计图'
18            },
19            xAxis: {
20                categories: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
21            },
22            yAxis: {
23                min: 0,
24                title: {
25                    text: '次数'
26                }
27            },
28            legend: {
29                layout: 'vertical',
30                backgroundColor: '#FFFFFF',
31                align: 'left',
32                verticalAlign: 'top',
33                x: 100,
34                y: 70,
35                floating: true,
36                shadow: true
37            },
38            tooltip: {
39                formatter: function() {
40                    return ''+
41                        this.x +': '+ this.y +' 次';
42                }
43            },
44            plotOptions: {
45                column: {
46                    pointPadding: 0.2,
47                    borderWidth: 0
48                }
49            },
50                series: []
51        };
52        $.getJSON('index.php?m=2x3&a=operate',{
53			'action':'getchart'
54            },function(data){       
55	        var series = { // <-------------------- create just one series object
56			 type: 'column',
57			name: '2012',
58			data: [] //data array for new series
59		}; 				 
60		var i=0;
61		for(i=0;i<=11;i++){
62			var j =parseInt(data[i]);  //这个很重要，TNN的，弄了我好几小时才发现
63			series.data.push(j);
64		}
65		 options.series.push(series); // <-------- pushing series object
66		var chart = new Highcharts.Chart(options); 	
67             });
68    });   
69});
70//-->
71</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月份显示去了~