3D金字塔效果圖：

????????之前寫過(guò)一個(gè)偽3D的金字塔，就想著寫一個(gè)真的3D金字塔。設(shè)想可以通過(guò)繪制底部頂部是正方形，側(cè)面是等腰梯形組裝成一個(gè)3D的金字塔。
????????之前偽3D金字塔的層間隔是通過(guò)向數(shù)據(jù)之間加入一個(gè)值，并設(shè)置其背景顏色為透明色，不打算使用這種方式，打算自己去修改金字塔圖層的樣式，需要重新計(jì)算每個(gè)數(shù)值對(duì)應(yīng)的高度：

????????Load函數(shù)的this.series[0].data是從金字塔底部往上走的，data內(nèi)的graphic.pathArray包含金字塔繪制信息，data[0]的兩個(gè)底部點(diǎn)位置、金字塔的夾角和對(duì)應(yīng)高度，可以得到底層金字塔的頂部?jī)蓚€(gè)的位置，根據(jù)data[0]的兩個(gè)頂點(diǎn)位置、夾角和層間隔高度，可以得到下一層底部的兩個(gè)點(diǎn)，其他的點(diǎn)以此類推，繪制新的金字塔：

代碼

效果

????????發(fā)現(xiàn)label的牽引線位置錯(cuò)了，調(diào)整一下：

代碼

效果

????????接下來(lái)繪制底部的圖形，設(shè)置底部?jī)蓷l線從正面看去的夾角，由此得到另兩個(gè)點(diǎn)的位置：

代碼

效果

????????從效果圖上，感覺(jué)底部是繪制在正面的上面的，調(diào)整一下加入位置：

代碼

效果

????????根據(jù)同樣的邏輯得到頂部的另外兩個(gè)頂點(diǎn)，將剩余的四個(gè)面繪制出來(lái)，并注意繪制的順序：

代碼

效果

????????看不大出來(lái)效果，調(diào)整一下角度：

????????從效果圖上看，即使顏色設(shè)計(jì)的是透明色，平面拼接起來(lái)毫無(wú)立體的效果，調(diào)整一下顏色：

????????這樣看起來(lái)，感覺(jué)不太美觀，調(diào)整一下金字塔角度：

代碼

效果

????????鼠標(biāo)在左邊移動(dòng)的時(shí)候有tooltip展示，右邊則沒(méi)有。一開(kāi)始打算左邊的tooltip就不處理，默認(rèn)使用highcharts的操作，左側(cè)監(jiān)聽(tīng)移入，展示自定義的tooltip。不過(guò)這樣的話，tooltip的樣式發(fā)生更改就要改兩次。就不展示highcharts的tooltip，展示自定義的tooltip。
????????先在正面和右側(cè)面，添加tooltip需要用到的信息：

????????為容器添加鼠標(biāo)移動(dòng)的移出事件：

????????3D金子就大體完成了，調(diào)整瀏覽器頁(yè)面大小，金字塔的繪制成這樣了：

????????先將金字塔的角度調(diào)整回來(lái)，移出之前l(fā)oad添加平面繪制后，再走一遍load的操作。對(duì)于tooltip的操作不用再在redraw中在執(zhí)行一遍：

????????多次調(diào)整頁(yè)面大小，發(fā)現(xiàn)沒(méi)有問(wèn)題了。