JavaScript圖表工具FusionCharts入門教程(24):甜甜圈中的單片切片和智能標簽

---

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最新版

啟用單片切片

默認情況下，餅圖和甜甜圈圖允許您一次切出多個餅圖/甜甜圈片。但是，您可以選擇一次僅啟用一個切片。
默認情況下，啟用多個切片。要停止多重切片，請將enableMultiSlicing屬性設置為0。

請參閱下面給出的代碼：

{
  "chart": {
    "enableMultiSlicing": "0"
  }
}

啟用了單切片的甜甜圈圖如下所示：

禁用智能標簽和行

默認情況下，餅圖和甜甜圈圖使用智能標簽和線條呈現(xiàn)-智能標簽是使用稱為智能線的線段連接到其對應的餅圖切片的數(shù)據(jù)標簽。即使將大量標簽放置在附近，智能標簽也可以管理標簽的重疊。但是，您可以選擇禁用這些智能標簽。
要禁用智能標簽，請將enableSmartLabels屬性設置為0。

請參閱下面給出的代碼：

{
  "chart": {
    "enableSmartLabels": "0"
  }
}

禁用了智能標簽的餅圖如下所示：

如果禁用了智能標簽，則在標簽數(shù)量眾多的情況下，標簽可能會相互重疊。

自定義智能線

除了啟用和禁用智能線之外，您還可以設置智能線的外觀屬性。要自定義智能線，請遵循以下步驟：

• 使用smartLineColor屬性為智能線顏色指定十六進制代碼。
• 使用smartLineThickness屬性設置智能線的粗細。
• 使用smartLineAlpha屬性設置智能線的透明度。此屬性的值介于0（透明）和100（不透明）之間。
• 將isSmartLineSlanted屬性設置0為將智能線渲染為直線。

請參考下面的代碼：

{
  "chart": {
    "smartLineColor": "#ff0000",
    "smartLineThickness": "2",
    "smartLineAlpha": "100",
    "isSmartLineSlanted": "0"
  }
}

下面顯示了一個value2Position屬性設置為inside（在圖表級別）的pie2d：

在餅圖/甜甜圈圖中，由于空間不足，更改值的位置有時可能會彼此重疊。 在這種情況下，引入了新的屬性minAngleForValue，該屬性設置餅圖的最小角度，在該最小角度以下的值將不可見。

請參考下面的代碼：

{
  "chart": {
    "valuePosition": "inside",
    "minAngleForValue": "75"
  }
}

具有自定義智能線的裝飾特性的餅圖如下所示：

配置標簽距離和電氣間隙

現(xiàn)在，您已經知道如何自定義圖表中的標簽和標簽線。在這里，我們討論如何配置圖表的標簽距離。

要配置標簽距離和間隙，請按照以下步驟操作:

• 使用labelDistance屬性設置標簽/值與餅狀/甜甜圈邊緣之間的距離（以像素為單位）。
• 僅當禁用智能標簽時，此屬性才適用。

請參考下面的代碼：

{
  "chart": {
    "enableSmartLabels": "0",
    "labelDistance": "5"
  }
}

---

想要購買FusionCharts Suite XT正版授權，或了解更多產品信息請點擊【咨詢在線客服】