利用js生成3D柱状图

1.引用js文件

<script src="${pageContext.request.contextPath }/js/highcharts.js"></script>
<script src="${pageContext.request.contextPath }/js/highcharts-3d.js"></script>

2.html代码

<div id="father" style="position: relative;">
	<input type="hidden" name="year" id="year" value="${year }">
	<div id="container" style="width: 100%; margin: 0 auto;"></div>
	
	<div style="position: absolute; top: 20px;right: 0px; z-index: 999" id="sliders">
		<table>
		   <tr><td>拖动滑块</td><td><input style="outline: none" id="R0" type="range" min="0" max="45" value="15"/> <span id="R0-value" class="value"></span></td></tr>
		   <tr><td>拖动滑块</td><td><input style="outline: none" id="R1" type="range" min="0" max="45" value="15"/> <span id="R1-value" class="value"></span></td></tr>
		</table>
	</div>
</div>

3.js处理json数据,生成柱状图

<script language="JavaScript">
$(document).ready(function() { 
    var departArray = new Array();
    var countArray = new Array();
 	var array = null;
 	var year = $("#year").val();
    $.ajax({
        type:'get',
        async:false,
        dataType:'json',
        url:'xxxxx?year='+year,//请求数据的地址
        success:function(data){
            var json = eval("("+data+")");
            for(var i in json){
                //循环json对象,设置x轴和y轴
            	departArray[i] = json[i].name;
            	countArray[i] = json[i].y;
            }
            array=json;
        },
        error:function(e){
        	alert(error);
        } 
    });
    //循环数据,找出峰值
    for(var i=0; i<countArray.length; i++){
    	for(var j=i+1; j<countArray.length; j++){
    		 if(countArray[i]>countArray[j]){
	            var tmp = countArray[i];
	            countArray[i] = countArray[j];
	            countArray[j] = tmp;
	        }
    	}
    }
    //设置柱状图属性
   	var chart = {
      renderTo: 'container',
      type: 'column',
      margin: 75,
      options3d: {
         enabled: true,
         alpha: 15,
         beta: 15,
         depth: 50,
         viewDistance: 25
      }
   };
   var title = {
      text: $("#year").val()+'xxxxxx统计图'   
   };
   var xAxis = {
   	  categories: departArray,
      labels: { 
          rotation: 0, 
          style: { 
          fontSize: '10px',
          fontFamily: 'Verdana, sans-serif',
          writingMode:'tb-rl'    //文字竖排样式
          }
      }
   };
   var yAxis = {
   	 title:{
        text:'发布条数' //Y轴的名称
        },
     max:countArray[countArray.length-1]//最大值
   };
   var credits= {
     	enabled: false
	};
   var plotOptions = {
      column: {
         depth: 25
      }
   };
   var series= [{
      data: array,
      name:'信息发布统计'
   }];  
   
   var k = {};   
   k.chart = chart; 
   k.title = title;
   k.xAxis = xAxis;
   k.yAxis = yAxis;       
   k.series = series;
   k.credits = credits;
   k.plotOptions = plotOptions;
   var highchart = new Highcharts.Chart(k);
  
   function showValues() {
      $('#R0-value').html(highchart.options.chart.options3d.alpha);
      $('#R1-value').html(highchart.options.chart.options3d.beta);
   }

   // Activate the sliders
   $('#R0').on('change', function () {
      highchart.options.chart.options3d.alpha = this.value;
      showValues();
      highchart.redraw(false);
   });
   $('#R1').on('change', function () {
      highchart.options.chart.options3d.beta = this.value;
      showValues();
      highchart.redraw(false);
   });

   showValues();   
   
   window.onload = function customerMsg(){
   	

   };
});
</script>

效果图: