Highcharts 4和Highstock 2在四月份迎來更新。3D功能、全新DOWNLOAD BUILDER以及立體儀表、熱力圖等功能，都讓用戶為之興奮。

這些功能到底怎樣，我們如何使用這些功能，除了這些 功能，Highcharts還有哪些變化？今天，慧都控件網為大家深入講解Highcharts 4的變化。

Highcharts 4文件變化：

我們下載Highcharts 4會得到一個1mb左右的壓縮包，小得不可思議（剛開始還以為下錯了~~），解壓后大約有3mb，在js文件夾中，我們找到了熟悉的文件：highcharts.js、、以及highcharts-all.js、highcharts-more.js等，老版本都有的。不過，讓人眼前一亮的卻是那個新面孔：highcharts-3d.js、highcharts-3d.src.js，這就是我們的3D模塊文件，沒有他，3D功能就真的成浮云了。

在modules文件夾中，也多出來了幾個新面孔：heatmap.js，、heatmap.src.js、solid-gauge.js、solid-gauge.src.js,光看名字，我們也可以猜到這些文件所對應的個功能，他們分別是：熱力圖、立體儀表。文件直接地址：

Highcharts 4		Highcharts 3

比起Highcharts 3，Highcharts 4還添加了一些小功能，比如添加了兩個主題顏色，不過鑒于這些功能相對比較簡單，本文不做詳細說明。如有需求，請參考： Highcharts 4更新說明

Highcharts 4 3D功能：

解讀一：使用前提

使用Highcharts 3D功能，必須首先加載3D功能模塊，即highcharts-3d.js。，將其放置在 highcharts.js 之后。

解讀二：為圖表設置3D選項

加載3D模塊不會改變已經出現的圖表，除非他們被專門設置過。這個功能很方便，可以讓2D和3D 圖表存在于同一頁面，方便我們對比其他操作。

3D圖表的設置操作在選項中  chart 上完成，一些特殊的圖表設置可以在 plotOptions 中設置。

如果想偷點懶，將所有3D 選都設置了，可以使用下面的示例代碼（需要修改相應值，相應參數可參考下文）：

chart: {
    ....
    options3d: {
        enabled: ´boolean value´,
        alpha: ´numeric value´,
        beta: ´numeric value´,
        depth: ´numeric value´,
        viewDistance: ´numeric value´,
        frame: {
            bottom: {
                size: ´numeric value´,
                color: ´color value´
            },
            side: {
                size: ´numeric value´,
                color: ´color value´
            },
            back: {
                size: ´numeric value´,
                color: ´color value´
            }
       }
   },
   ...
}
...
plotOptions: {
    ...
    column: {
        ...
        depth: ´numeric value´,
        groupZPadding: ´numeric value´,
        ...
    },
    ...
    pie: {
        depth: ´numeric value´
    },
    ...
}

解讀三：重要的3D選項（  chart.options3d 部分）

• enabled ：顯示圖表是否設置為3D， 我們將其設置為 true。
• depth   ： 圖表的合計深度，默認為100
• viewDistance  ：定義圖表的瀏覽長度.
• alpha & beta  ：  圖表視圖旋轉角度

注意：viewDistance設置過小，可能使圖表扭曲，這是因為觀看點里圖表太近。

在問答里面，我們有一個出現過的實例，大家可以來體驗 一下，制作3D餅圖：如何用highcharts制作3d圖？

解讀四： chart.options3d

hart.options3d 中可以在圖表周圍創建3個panes，我們把它稱之為 frame，默認情況下，這些panes是不可見的，不過可以在 chart.options.3d.frame 中單獨設置，我們舉個例子：

bottom|side|back: {
    size:   The thickness of the pane (defaults to 0)
    color:  The color of the pane (default to transparent)
}

Highcharts 4 Download Builder：

需要定制Highcharts的時候，這個就比較方便了。我們可以下載文件體驗一下.

編譯代碼：

無編譯代碼：http://pan.baidu.com/s/1pJlWXn1

Highcharts 4功能表包括新功能以及之前版本中出現過的功能，Download Builder中的JS，也可以在下表工具中進行篩選，上面的js下載只提供了核心文件的下載（紅色框內容）