JavaScript圖表工具FusionCharts入門教程(25):餅圖和甜甜圈圖（二）

---

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來制作專業(yè)的JavaScript圖表。

點擊下載FusionCharts最新版

跳過重疊標簽

餅圖/甜甜圈圖中的標簽過多時（即使使用智能標簽也很難調(diào)整），標簽可能會重疊。在這種情況下，您可以選擇跳過重疊的標簽。最不重要的餡餅的標簽將被刪除。要跳過標簽的重疊，請將skipOverlapLabels屬性設(shè)置為1。

請參閱下面給出的代碼：

{
  "chart": {
    "skipOverlapLabels": "1"
  }
}

自定義Pie Radius

默認情況下，對于餅圖/甜甜圈圖，該圖會根據(jù)提供的數(shù)據(jù)自動計算最合適的餅圖半徑。但是，您可以選擇顯式設(shè)置餅圖的外半徑。使用pieRadius屬性指定餅圖/甜甜圈圖的外半徑。

從v3.14.0開始，您可以百分比和像素值形式指定餅圖/甜甜圈圖的半徑。

請參閱下面給出的代碼：

{
  "chart": {
    "pieRadius": "50"
  }
}

自定義外徑的餅圖如下所示：

設(shè)置半徑為百分比值

現(xiàn)在，您已經(jīng)知道如何自定義餅圖/甜甜圈圖的半徑。在這里，我們討論如何使用百分比值配置餅圖/甜甜圈圖的半徑。

您可以通過設(shè)置pieRadius屬性的值來以百分比形式設(shè)置餅圖的半徑。當(dāng)您設(shè)置pieRadius百分比值時，餅圖的半徑是相對于圖表畫布空間計算的。

請參考下圖：

在甜甜圈圖中，可以應(yīng)用該pieRadius屬性來設(shè)置甜甜圈圖的上限閾值的半徑。

請參考下圖：

要自定義甜甜圈圖的內(nèi)半徑，請doughnutRadius以百分比設(shè)置屬性值。
請參考下圖：

在上圖中，doughnutRadius設(shè)置為80％，并且您可以看到，相對于甜甜圈圖的上限，已計算出半徑的百分比。

從v3.14.0開始，您可以百分比和像素值形式指定餅圖/甜甜圈圖的半徑。

請參閱下面給出的代碼：

{
  "chart": {
    "pieRadius": "90",
    "doughnutRadius": "80"
  }
}

---

想要購買FusionCharts Suite XT正版授權(quán)，或了解更多產(chǎn)品信息請點擊