Highcharts 3D Pie Chart
The following example demonstrates a 3D pie chart.
In the previous chapters, we have learned the basic configuration syntax of Highcharts. Next, let's look at other configurations.
Configuration
chart.options3d configuration
The following lists the basic configuration of 3D charts. Set the chart's type attribute to pie, and the options3d option can set the 3D effect.
var chart = {
type: 'pie',
options3d: {
enabled: true, //显示图表是否设置为3D， 我们将其设置为 true
alpha: 15, //图表视图旋转角度
beta: 15, //图表视图旋转角度
depth: 50, //图表的合计深度，默认为100
viewDistance: 25 //定义图表的浏览长度
}
};
Example
File name: highcharts_3d_pie.htm
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | Example(example.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var chart = {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
};
var title = {
text: '2014 年特定网站各浏览器占有率'
};
var tooltip = {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
};
var plotOptions = {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
};
var series= [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}];
var json = {};
json.chart = chart;
json.title = title;
json.tooltip = tooltip;
json.plotOptions = plotOptions;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
The output of the above example is:
other extensions