<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts-3D柱状图举例</title>
<style type="text/css">
#container {
height: 400px;
min-width: 400px;
max-width: 1200px;
margin: 0 auto;
}
</style>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/highcharts-3d.js"></script>
</head> <body>
<div id="container"></div>
<script language="JavaScript">
Highcharts.chart('container', {
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 10, //俯瞰角度
beta: 10, //旋转角度
depth: 70 //景深
}
},
title: {
text: '<b>' + '2016年销售额统计表' + '</b>'
},
subtitle: {
text: '来源：万得利公司'
},
plotOptions: {
column: {
depth: 25, //柱状体的厚度
dataLabels: {
enabled: true, //柱状体上显示数额
} },
},
xAxis: {
categories: Highcharts.getOptions().lang.shortMonths //月份缩写数组
},
yAxis: {
title: {
text: '万元(￥)'
}
},
series: [{
name: '化妆品销售额',
data: [7, 3, 1, 4, 2, 5, 1, 4, 6, 3, 5, 7]
},
{
name: '保健品销售额',
data: [null, 1, 2, 8, 9, 5, 1, 6, 4, 5, 3, 6]
}
]
});
</script> </body> </html>
运行截图：