<%@ 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>
HighCharts操作案例-3D可拖拽柱状图
时间： 2024-09-30 06:26:12