highcharts 柱狀圖 動態加載

 

 

　　　　　　　　　　　　　　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；