<!DOCTYPE>
<html lang='en'>
<head>
<title>5-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 () {
var chart = new Highcharts.Chart({
chart:{
renderTo:'container',//圖表描繪出后放到頁(yè)面的某一具體位置
type:'pie',//餅圖 line線性圖腔呜，colmun柱狀圖
//邊距是指圖表的外邊與圖形區(qū)域之間的距離轻猖，數(shù)組分別代表上、右蟆技、下和左。要想單獨(dú)設(shè)置可以用marginTop,marginRight,marginBotton 和 marginLeft.
marginTop:80,
marginRight:40,
//3D圖像設(shè)置項(xiàng)师抄。3D效果需要引入highcharts-3d.js醋界，下載或者在線路徑為code.highcharts.com/highcharts-3d.js.
options3d:{
enabled:true,//畫(huà)圖表是否啟用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,
//viewDistance: 25//它定義了觀看者在圖前看圖的距離拼坎，它是非常重要的對(duì)于計(jì)算角度影響在柱圖和散列圖浮毯，此值不能用于3D的餅圖，默認(rèn)值為100
}
},
/************標(biāo)題***************/
//標(biāo)題默認(rèn)顯示在圖表的頂部泰鸡，包括標(biāo)題和副標(biāo)題（subTitle）债蓝，其中副標(biāo)題是非必須的。
//主標(biāo)圖
title: {
text:'食品占市場(chǎng)比例'
},
//副標(biāo)題
subtitle: {
},
//plotOptions用于設(shè)置圖表中的數(shù)據(jù)點(diǎn)相關(guān)屬性盛龄。
plotOptions: {
pie:{
// 是否將每個(gè)系列的值疊加在彼此的頂部上饰迹。
//stacking: 'normal',
//allowPointSelect:true,
//餅圖的內(nèi)直徑的大小。尺寸大于0呈現(xiàn)一個(gè)甜甜圈圖余舶“⊙迹可以是一個(gè)百分比或像素值。百分比是相對(duì)于餅的大小匿值。像素值被給定為整數(shù)莉掂。
//注：在Highcharts < 4.1.2，百分比是相對(duì)于小區(qū)不是餅圖的大小千扔。
innerSize:100,
cursor:'pointer',
dataLabels:{
enabled:true,
format:'{point.name}'
},
depth:45
}
},
/************坐標(biāo)軸***************/
//所有的圖表除了餅圖都有X軸和Y軸憎妙，默認(rèn)情況下，x軸顯示在圖表的底部曲楚，y軸顯示在左側(cè)
//（多個(gè)y軸時(shí)可以是顯示在左右兩側(cè)）厘唾，通過(guò)設(shè)置chart.inverted = true 可以讓x，y軸顯示位置對(duì)調(diào)
//xAxis: {
//獲取月份的簡(jiǎn)稱
//categories: Highcharts.getOptions().lang.shortMonths
//categories:['A','B','C','D','E']
//},
//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: {
headerFormat: '<b>{point.key}</b><br>',
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.percentage:.lf}%'
},
*/
/************圖例***************/
//省略圖例會(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]
}
]*/
/*
series: [{
name: 'AA',
data: [5, 3, 4, 7, 2],
//此選項(xiàng)允許在堆疊圖表中的分組系列逊朽。堆棧選項(xiàng)可以是一個(gè)字符串或一個(gè)數(shù)字或其他任何東西罕伯，只要分組的系列“堆棧選項(xiàng)”相互匹配。
stack: '1'
}, {
name: 'BB',
data: [3, 4, 4, 2, 5],
stack: '1'
}, {
name: 'CC',
data: [2, 5, 6, 2, 1],
stack: '2'
}, {
name: 'CC',
data: [3, 0, 4, 4, 3],
stack: '2'
}]
*/
/*
series: [{
type: 'pie',
name: '所占比例',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,//屬于餅圖叽讳，是否顯示
selected: true//是否默認(rèn)選中
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
*/
series: [{
name: 'Delivered amount',
data: [
['Bananas', 8],
['Kiwi', 3],
['Mixed nuts', 1],
['Oranges', 6],
['Apples', 8],
['Pears', 4],
['Clementines', 4],
['Reddish (bag)', 1],
['Grapes (bunch)', 1]
]
}]
});
/*
chart: {
renderTo: 'container',
type: 'column',
margin: 75,
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: 'Chart rotation demo'
},
subtitle: {
text: 'Test options by dragging the sliders below'
},
plotOptions: {
column: {
depth: 25
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
*/
/*
$('#R0').on('change', function(){
chart.options.chart.options3d.alpha = this.value;
showValues();
chart.redraw(false);
});
$('#R1').on('change', function(){
chart.options.chart.options3d.beta = this.value;
showValues();
chart.redraw(false);
});
function showValues() {
$('#R0-value').html(chart.options.chart.options3d.alpha);
$('#R1-value').html(chart.options.chart.options3d.beta);
}
showValues();
*/
});
</script>
</head>
<body>
<div id="container" style="min-width:700px;height:400px"></div>
<!-- 調(diào)節(jié)部分 -->
<div id="sliders" style="min-width:310px;max-width: 800px;margin: 0 auto;">
<table>
<tr>
<td>Alpha Angle</td><!-- 內(nèi)旋角 -->
<td>
<input id="R0" type="range" min="0" max="45" value="15"/>
<span id="R0-value" class="value"></span>
</td>
</tr>
<tr>
<td>Beta Angle</td><!-- 外旋角 -->
<td>
<input id="R1" type="range" min="0" max="45" value="15"/>
<span id="R1-value" class="value"></span>
</td>
</tr>
</table>
</div>
</body>
</html>
圖片.png
