HighCharts操作案例-3D可拖拽柱状图

最新推荐文章于 2025-03-12 10:19:15 发布

Mr_LiuP

最新推荐文章于 2025-03-12 10:19:15 发布

阅读量6k

点赞数 7

分类专栏： HighCharts 文章标签： HighCharts

本文链接：https://blog.youkuaiyun.com/liupeng_family/article/details/38729143

版权

HighCharts 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用Highcharts库实现的3D柱状图案例，该图表展示了不同日期的金额与数量统计，通过JavaScript实现了图表的动态旋转功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
<title></title>
	<script src="<%=basePath%>bootmetro/js/jquery-1.10.0.min.js"></script>
	<script type="text/javascript">
$(function () {
	var chart = new Highcharts.Chart({
    //$('#container').highcharts({
        chart: {
        	renderTo: 'container',
            type: 'column',
            margin: 75,
            options3d: {
				enabled: true,
                alpha: 5,//上下倾斜角度
                beta: 25,//左右倾斜角度
                depth: 70,//深度
		
		frame: {//3D墙背景
                    bottom: { size: 1, color: 'rgba(0,0,0,0.02)' },
                    back: { size: 1, color: 'rgba(0,0,0,0.04)' },
                    side: { size: 1, color: 'rgba(0,0,0,0.06)' }
                }

            }
        },credits:{
            enabled:false // 禁用版权信息
        },
        title: {//主标题
            text: '基本信息总量统计'
        },
        subtitle: {//副标题
            text: '根据时间段统计不同种类的总数值'
        },
        plotOptions: {//为每个节点显示值
            column: {
                depth: 25
            }
        },
        xAxis: {
            categories: ['2014-08-11','2014-08-12','2014-08-13','2014-08-14','2014-08-15']//Highcharts.getOptions().lang.shortMonths
        },
        yAxis: {
        	title:{
     	       text:'金额'
     	   },
     	   labels: {//格式化纵坐标的显示风格
               formatter: function() {
                   return this.value ;
               }
           },
           opposite: false//反转
        },
	legend: {//是否显示底注
            enabled: false
        },
        series: [{//图表数值
            name: '金额',
	   		//colorByPoint: true, //为每个柱子显示不同颜色
            data: [1, 4, 5, 2, 1 ]
        },{
            name: '数量',
            data: [2, 3, null, 4, 0 ]
        }
        ], 
        tooltip: { 
            shared: true,//节点数据框共享
            /*
         	enabled: true,//每个节点显示数据框
            formatter: function() {//格式化每个节点数据框
                return '<b>'+ this.x +'</b><br>'+ this.series.name +': '+ this.y;
            }
        */
        },
        /*
        plotOptions: {//为每个节点显示值
        	column: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: true
            },
        },
        */
    });
    
	// Add mouse events for rotation
	$(chart.container).bind('mousedown.hc touchstart.hc', function (e) {

	    e = chart.pointer.normalize(e);
		

	    var posX = e.pageX,
	        posY = e.pageY,
	        alpha = chart.options.chart.options3d.alpha,
	        beta = chart.options.chart.options3d.beta,
	        newAlpha,
	        newBeta,
	        sensitivity = 5; // lower is more sensitive

	    $(document).bind({
	        'mousemove.hc touchdrag.hc': function (e) {
	            // Run beta
	            newBeta = beta + (posX - e.pageX) / sensitivity;
	            newBeta = Math.min(100, Math.max(-100, newBeta));
	            chart.options.chart.options3d.beta = newBeta;

	            // Run alpha
	            newAlpha = alpha + (e.pageY - posY) / sensitivity;
	            newAlpha = Math.min(100, Math.max(-100, newAlpha));
	            chart.options.chart.options3d.alpha = newAlpha;

	            chart.redraw(false);
	        },                            
	        'mouseup touchend': function () { 
	            $(document).unbind('.hc');
	        }
	    });
	});
});


		</script>
	
</head>
<body>

<script src="highcharts/highcharts.js"></script>
<script src="highcharts/highcharts-3d.js"></script>
<script src="highcharts/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
	
</body>
</html>