JavaScript圖表工具FusionCharts入門(mén)教程（22）：餅圖和甜甜圈圖

---

FusionCharts Suite XT是全面的跨平臺(tái)、跨瀏覽器JavaScript圖表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT 、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至簡(jiǎn)單的HTML頁(yè)面。它是你值得信賴(lài)的JavaScript圖表解決方案，目前在全球有45萬(wàn)用戶選擇Fusioncharts來(lái)制作專(zhuān)業(yè)的JavaScript圖表。

點(diǎn)擊下載FusionCharts最新版

餅圖是一種圓圖，分為多個(gè)扇形，其中每個(gè)扇形的弧長(zhǎng)，其中心角和面積與它代表的數(shù)量成比例。甜甜圈圖類(lèi)似于餅圖，并提供類(lèi)似的數(shù)據(jù)分析。FusionCharts Suite XT包括餅圖和甜甜圈圖，以繪制需要顯示為整體百分比的數(shù)據(jù)。

餅圖2D圖表

讓我們創(chuàng)建第一個(gè)餅圖2D圖表，該圖表將顯示一年中按產(chǎn)品類(lèi)別劃分的收入劃分。

要?jiǎng)?chuàng)建餅圖2D圖表，請(qǐng)按照以下步驟操作：

• 在JSON數(shù)據(jù)中，以"<attributeName>": "<value>"格式設(shè)置屬性及其對(duì)應(yīng)的值。
• 使用type屬性指定圖表類(lèi)型。要渲染餅圖2D圖表，請(qǐng)?jiān)O(shè)置pie2d。
• 使用renderAt屬性設(shè)置容器對(duì)象。
• 使用width和height屬性指定圖表的尺寸。
• 使用dataFormat屬性設(shè)置要傳遞給圖表對(duì)象的數(shù)據(jù)類(lèi)型（JSON / XML）。

上面的代碼的餅圖二維圖如下所示：

餅圖3D圖表

要以3D形式繪制餅圖，請(qǐng)將type屬性的值從更改pie2D為pie3D。其余數(shù)據(jù)結(jié)構(gòu)保持不變。

3D餅圖如下所示：

甜甜圈2D圖表

眾所周知，甜甜圈圖類(lèi)似于餅圖。唯一的區(qū)別是，甜甜圈圖的中心為空白-顧名思義，它看起來(lái)像甜甜圈。

讓我們創(chuàng)建第一個(gè)甜甜圈2D圖表，展示與上面創(chuàng)建的餅圖相同的用例。

要?jiǎng)?chuàng)建甜甜圈2D圖表，請(qǐng)將type屬性設(shè)置為doughnut2d。

上面代碼的甜甜圈2D圖表如下所示：

甜甜圈3D圖表

要以3D渲染甜甜圈圖，請(qǐng)將type屬性的值從更改doughnut2D為doughnut3D。其余數(shù)據(jù)結(jié)構(gòu)保持不變。

3D的甜甜圈圖如下所示：

---

想要購(gòu)買(mǎi)FusionCharts Suite XT正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊【咨詢(xún)?cè)诰€客服】