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

這些功能到底怎樣，我們?nèi)绾问褂眠@些功能，除了這些 功能，Highcharts還有哪些變化？今天，慧都控件網(wǎng)為大家深入講解Highcharts 4的變化。

Highcharts 4文件變化：

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

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

Highcharts 4		Highcharts 3

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

Highcharts 4 3D功能：

解讀一：使用前提

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

解讀二：為圖表設(shè)置3D選項(xiàng)

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

3D圖表的設(shè)置操作在選項(xiàng)中  chart 上完成，一些特殊的圖表設(shè)置可以在 plotOptions 中設(shè)置。

如果想偷點(diǎn)懶，將所有3D 選都設(shè)置了，可以使用下面的示例代碼（需要修改相應(yīng)值，相應(yīng)參數(shù)可參考下文）：

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選項(xiàng)（  chart.options3d 部分）

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

注意：viewDistance設(shè)置過小，可能使圖表扭曲，這是因?yàn)橛^看點(diǎn)里圖表太近。

在問答里面，我們有一個(gè)出現(xiàn)過的實(shí)例，大家可以來體驗(yàn) 一下，制作3D餅圖：如何用highcharts制作3d圖？

解讀四： chart.options3d

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

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的時(shí)候，這個(gè)就比較方便了。我們可以下載文件體驗(yàn)一下.

編譯代碼：

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

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