Highcharts、Ajax、PHP交互

1、首先将Highcharts插件所需的js跟css样式文件引入项目中；

<script src="view/admin/js/jquery-1.8.3.min.js"></script>
<script src="view/admin/js/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>

2、在前台页面中添加一个存放图表的容器；

<div id="container" style="text-align:center;min-width:700px;height:400px"></div>

3、在前台js中进行Ajax请求；

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url:"?a=admin&m=getData",
        dataType:"json",//这里一定要使用json格式
        success: function(data){

             //var xset =  data;//调用一组数据就只需赋值
             data = data.split(';');//解析成数组
             data[0] = JSON.parse(data[0]);//获取相应键值对应的数据后还需要json化
             data[1] = JSON.parse(data[1]);
             var xset =  data[0];
             var xset1 = data[1];

             $('#container').highcharts({
                title: {
                    text: '月订单统计表',
                    x: -20 //center
                },
                subtitle: {
                    text: '',
                    x: -20
                },
                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
                yAxis: {
                    title: {
                        text: ''
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    valueSuffix: '个'
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: [{
                    name: '订单数',
                    data: xset
                    }, {
                    name: '预留位数',
                    data: xset1
                }]
            });
            }
        })  

});             

4、在后台进行数据获取操作，

public function getData() {
        for($i=1;$i<=12;$i++){
            $orders[] = $this->_order->total1($i);//此处是调用的model中的total1方法来获取每个月订单销量，读者可根据自己的实际情况进行数据获取
            }
        $orders = implode(',',$orders);
        $orders1 = "[".$orders."]";
        echo $orders1;
    }

上边是获取一组数据进行表格数据填充，如下是获取多组数据的方法，为了简单，我就调用了同一个函数将数据逆序输出以查看不同。

public function getData() {
        for($i=1;$i<=12;$i++){//正序
            $orders[] = $this->_order->total1($i);
            }
        for($i=12;$i>=1;$i--){//逆序
            $order[] = $this->_order->total1($i);
            }   
        $orders = implode(',',$orders);
        $order = implode(',',$order);
        $orders1 = "[".$orders."]";
        $order1 = "[".$order."]";
        $data = $orders1.";".$order1;//将两组数据组合成一个字符串
        $data = json_encode($data);
        echo $data;
    }

这样就算完成，效果如下图，第一次写博客，有不足之处还请各位大神指出。