利用js生成3D柱状图

拼搏现实的明天。 2022-05-17 07:36 230阅读 0赞

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>

效果图:

![70][]

[70]: /images/20220517/bd12f163478641fb9831e41908dfc01a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，230人围观）

还没有评论，来说两句吧...

相关阅读

相关 ECharts 实现3D重叠椭圆柱状图

1 实现代码（3D重叠椭圆柱状图） <body>  <div i

亦凉/ 2023年10月05日 11:29/ 0 赞/ 34 阅读

相关 Echart 基于geo的3D柱状图

echarts社区例子：[ECharts Gallery - 3d地图画线1 (makeapie.com)][ECharts Gallery - 3d_1 _makeapie.

超、凢脫俗/ 2022年12月25日 00:54/ 0 赞/ 546 阅读

相关 ECharts实现折线图变柱状图、ECharts实现立体柱状图、3D柱状图，ECharts立体柱状图属性

> 本文借助该链接做演示：[链接地址][Link 1] 1.ECharts实现折线图变柱状图把series写的type改成“line”即可如图： ![在这里

比眉伴天荒/ 2022年11月19日 04:28/ 0 赞/ 643 阅读

相关 Quartz2D柱状图

// // MyView.m // 画图1 // // Created by lusl on 14-5-15. // Copyright (c) 2014年

Love The Way You Lie/ 2022年08月27日 05:57/ 0 赞/ 176 阅读

相关 JFreeChar生成柱状图

前一篇文章说明了JFreeChar生成柱状图以及解决中文只能显示问方框的问题，本文主要记录柱状图的显示案例，可供初学者参考：先看一个简单的柱状图生成案例： \[java\

你的名字/ 2022年08月25日 08:29/ 0 赞/ 227 阅读

相关 D3.js-柱形图

柱形图，是使用柱形的长短来表示数据变化的图表，也是最简单的图表之一。一般情况下，柱形图包括：矩形、坐标轴和文字。一、矩形和文字定义一个数组，每个数据项表示矩形

梦里梦外;/ 2022年07月16日 10:57/ 0 赞/ 261 阅读

相关 JS之柱状图

效果如下： ![图片][20170207162115687] <script language="javascript"> function tabl

约定不等于承诺〃/ 2022年07月12日 02:20/ 0 赞/ 190 阅读

相关利用js生成3D柱状图

1.引用js文件 <script src="${pageContext.request.contextPath }/js/highcharts.js"></scrip

拼搏现实的明天。/ 2022年05月17日 07:36/ 0 赞/ 231 阅读

相关 d3.js水平横向柱状图表

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm

骑猪看日落/ 2022年04月18日 02:35/ 0 赞/ 286 阅读

相关 FusionCharts制作3D柱状图和折线图

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="U

分手后的思念是犯贱/ 2022年04月11日 08:29/ 0 赞/ 270 阅读