JavaScript圖表工具FusionCharts入門教程（22）：餅圖和甜甜圈圖

---

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

點擊下載FusionCharts最新版

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

餅圖2D圖表

讓我們創建第一個餅圖2D圖表，該圖表將顯示一年中按產品類別劃分的收入劃分。

要創建餅圖2D圖表，請按照以下步驟操作：

• 在JSON數據中，以"<attributeName>": "<value>"格式設置屬性及其對應的值。
• 使用type屬性指定圖表類型。要渲染餅圖2D圖表，請設置pie2d。
• 使用renderAt屬性設置容器對象。
• 使用width和height屬性指定圖表的尺寸。
• 使用dataFormat屬性設置要傳遞給圖表對象的數據類型（JSON / XML）。

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

餅圖3D圖表

要以3D形式繪制餅圖，請將type屬性的值從更改pie2D為pie3D。其余數據結構保持不變。

3D餅圖如下所示：

甜甜圈2D圖表

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

讓我們創建第一個甜甜圈2D圖表，展示與上面創建的餅圖相同的用例。

要創建甜甜圈2D圖表，請將type屬性設置為doughnut2d。

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

甜甜圈3D圖表

要以3D渲染甜甜圈圖，請將type屬性的值從更改doughnut2D為doughnut3D。其余數據結構保持不變。

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

---

想要購買FusionCharts Suite XT正版授權，或了解更多產品信息請點擊