<!DOCTYPE>
<html lang='en'>
<head>
<title>1-Highcharts 3D圖之普通3D柱狀圖與帶空值</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="../jquery-2.1.4/jquery.min.js"></script>
<script src="../Highcharts-4.2.5/js/highcharts.js"></script>
<script src="../Highcharts-4.2.5/js/highcharts-3d.js"></script>
<!--<script src="../Highcharts-4.2.5/js/themes/gray.js"></script>主題 -->
<script>
$(function () {
$('#container').highcharts({
chart:{
type:'column',
//邊距是指圖表的外邊與圖形區(qū)域之間的距離，數(shù)組分別代表上、右、下和左。要想單獨(dú)設(shè)置可以用marginTop,marginRight,marginBotton 和 marginLeft.
margin:45,
//3D圖像設(shè)置項(xiàng)。3D效果需要引入highcharts-3d.js，下載或者在線路徑為code.highcharts.com/highcharts-3d.js.
options3d:{
enabled:true,//畫圖表是否啟用3D函數(shù)，默認(rèn)值為：false
alpha:10,//3D圖旋轉(zhuǎn)角度，此為α角，內(nèi)旋角度默認(rèn)為0
beta:25,//3D圖旋轉(zhuǎn)角度，此為β角，外旋角度 默認(rèn)為0
//圖表的全深比，即為3D圖X，Y軸的平面點(diǎn)固定，以圖的Z軸原點(diǎn)為起始點(diǎn)上下旋轉(zhuǎn)，值越大往外旋轉(zhuǎn)幅度越大，值越小往內(nèi)旋轉(zhuǎn)越大，depth的默認(rèn)值為100
//默認(rèn)是： 100
depth:70
}
},
/************標(biāo)題***************/
//標(biāo)題默認(rèn)顯示在圖表的頂部，包括標(biāo)題和副標(biāo)題（subTitle），其中副標(biāo)題是非必須的。
//主標(biāo)圖
title: {
text:'我的3D圖'
},
//副標(biāo)題
subtitle: {
},
//plotOptions用于設(shè)置圖表中的數(shù)據(jù)點(diǎn)相關(guān)屬性。
plotOptions: {
column:{
depth:25
}
},
/************坐標(biāo)軸***************/
//所有的圖表除了餅圖都有X軸和Y軸，默認(rèn)情況下，x軸顯示在圖表的底部，y軸顯示在左側(cè)
//（多個(gè)y軸時(shí)可以是顯示在左右兩側(cè)），通過設(shè)置chart.inverted = true 可以讓x，y軸顯示位置對(duì)調(diào)
xAxis: {
//獲取月份的簡稱
categories: Highcharts.getOptions().lang.shortMonths
},
yAxis: {
//是否在正常顯示的對(duì)立面顯示軸。
//正常是垂直坐標(biāo)軸顯示在左邊，水平坐標(biāo)軸顯示在底部，因此對(duì)立面就是垂直坐標(biāo)軸顯示在右邊和水平坐標(biāo)軸顯示在頂部，這通常用于有兩個(gè)或多個(gè)坐標(biāo)軸。
opposite: true
},
/*************版權(quán)信息**********************/
credits:{
enabled:false // 禁用版權(quán)信息
},
/*************數(shù)據(jù)提示框**********************/
//tooltip: { valueSuffix: '°C' },
tooltip: {
},
/************圖例***************/
//省略圖例會(huì)在下面顯示
//也可以設(shè)置 設(shè)置在下方
legend: {
//layout: 'horizontal',//horizontal,vertical
//align: 'center',
//verticalAlign: 'bottom',
//borderWidth: 0
//enabled:false//關(guān)閉圖例
},
/*****************數(shù)據(jù)列******************/
series: [
{
name: 'Sales',
data: [2, 3, 5, 7, 9, 5, 1, 4, 6, 3]
//如果有個(gè)值為空的話，只需設(shè)為null
//data: [2, 3, 5, null, 9, 5, 1, 4, 6, 3]
}
]
});
});
</script>
</head>
<body>
<div id="container" style="min-width:700px;height:400px"></div>
</body>
</html>
圖片.png
