分想下用highcharts製做的3d餅圖

hightcharts升級4.0以後支持3D了，應該算是一件大事，網上有人已經作了些3D圖表，分享下。

首先，須要說明hightcharts 4支持原生3d圖，若是，你要作好效果的3d，建議下載最新的4版本。這是基礎。

其次，3d餅圖，須要在plotOptions中設置深度屬性：

就是這樣一句，設置爲25：

plotOptions.pie.depth: 25

準備工做完了，咱們開始製做3D餅圖。

步驟一：按照老規矩，寫入highcharts必要的JS：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>

步驟二：

咱們爲圖表設定一個大小，高度爲400px，用div將它包圍，而後設置一個id爲container，方便下面的js：

<div id="container" style="height: 400px"></div>

步驟三

填入js代碼：

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'pie',
            options3d: {
				enabled: true,
                alpha: 45,
                beta: 0,
            }
        },
        plotOptions: {
            pie: {
                depth: 25
            }
        },
        series: [{
            data: [2, 4, 6, 1, 3]
        }]
    });
});

下面是代碼和效果圖：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

原文爲問答：如何用highcharts製做3d圖？