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

點擊下載FusionCharts最新版

啟用單片切片

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

請參閱下面給出的代碼：

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

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

禁用智能標簽和行

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

請參閱下面給出的代碼：

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

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

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

自定義智能線

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

• 使用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"
  }
}

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

配置標簽距離和電氣間隙

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

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

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

請參考下面的代碼：

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

---

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