highcharts 柱状图 动态加载

Posted 2020-08-16 小赵的博客

 

 

　　　　　　　　　　　　　　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；