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;    }

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