highcharts柱状图动态加载

(1):导入样式

<script type="text/javascript" src="<%=request.getContextPath()%>/boot_js/jquery/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/highCharts/highcharts.js"></script>

 

(2):代码

<script type="text/javascript">

    var oChart;

    var oOptions;

    var rntData;

   

        oOptions = {  

                chart: {

                    renderTo: 'container', //将饼图渲染到container容器中，页面中需有一个id为container的div

                    type: 'column'//图表类型  column-柱状图 pie-饼图 line表示折线型(默认)spline表示曲线型areaspline表示曲线区域型

                },

                title: {

                    text: '公司地址分布图'//主标题

                },

                subtitle: {

                    text: '---------'//副标题

                },

                xAxis: {

                    type: 'category',//轴的类型

                    labels: {

                        //rotation: 20,倾斜度

                        style: {

                            fontSize: '13px',

                            //fontFamily: 'Verdana, sans-serif'

                        }

                    },

                    //设置x轴text文本

                    //categories:[]

                },

                yAxis: {

                    min: 0,

                    title: {

                        text: '人数'

                    }

                },

                legend: {

                    enabled: true

                },

                column:{

                    dataLabels:{

                        enabled:true, // dataLabels设为true

                        style:{

                            color:'#D7DEE9'

                        }

                    }

                },

                  //绑定鼠标放上后显示的字段

                tooltip: {

                    pointFormat: '{series.name}: <b>{point.y:.1f} 人</b>',

                    shared: false,//节点数据框共享

                    enabled: true,//每个节点显示数据框

                    formatter: function() {//格式化每个节点数据框

                        //return '<b>'+ this.x +'</b><br>'+ this.series.name +': '+ this.y;

                        return '<b>'+ this.series.name +'</b>入职人数: <b>'+ this.y +'</b>人';

                    }

                },

                series: []

               

        }

    

        $(document).ready(function(){

            

            oChart = new Highcharts.Chart(oOptions);

            

            //异步动态加载数据列

            LoadSerie_Ajax();

        });

        

        //异步读取数据并加载到图表

        function LoadSerie_Ajax() {

                var startTime = $("#startTime").val();

                var endTime = $("#endTime").val();

                //oChart.showLoading();

                $.ajax({  

                    url : '<%=request.getContextPath()%>/charts/getCharts.action?startTime='+startTime+"&endTime="+endTime,

                    type : 'POST',

                    dataType : 'json',

                    contentType: "application/x-www-form-urlencoded; charset=utf-8",   

                    success : function(rntData){

                         for(var i in rntData){

                                   var oSeries = {

                                       name:rntData[i].dname,   //该 name 是data数值的名称

                                       pointPadding: 0, //数据点之间的距离值

                                      groupPadding: 0, //分组之间的距离值

                                      borderWidth: 20,

                                      shadow: true,

                                      pointWidth:5, //柱子之间的距离值

                                      data: eval("[" + rntData[i].count + "]")   // series的data接受json数组

                              };

                                 oChart.addSeries(oSeries);//将对象添加到series中

                         }

                        

                    }

                });

                oChart.hideLoading();

        }

        

    </script>

 （3）html代码

<div id="container" style="width:800px;height: 400px;margin-top: 80px;margin-left: 330px;"></div>

　　根据以上的配置可以实现柱状图的动态调用。

　　如果需要再加条件查询时，页面加载后需要清空上一次的数据，将data数组的length长度设置为0；