<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用水量3D柱状图</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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: ['2015-08','2015-09','2015-10','2015-11','2015-12']//Highcharts.getOptions().lang.shortMonths
},
yAxis: {
title:{
text:'用水量(m³)'
},
// labels: {//格式化纵坐标的显示风格
// formatter: function() {
// return this.value ;
// }
// },
opposite: false//反转
},
legend: {//是否显示底注
enabled: false
},
series: [{//图表数值
name: '用水量(m³)',
//colorByPoint: true, //为每个柱子显示不同颜色
data: [2,4]
}
// ,{
// 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 type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script type="text/javascript" src="exporting.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts-3d.js"></script>
<div id="container" style="min-width:700px;height:400px"></div>
</body>
</html>
