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

---

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圖表。

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

啟用單片切片

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

請參閱下面給出的代碼：

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

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

禁用智能標(biāo)簽和行

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

請參閱下面給出的代碼：

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

禁用了智能標(biāo)簽的餅圖如下所示：

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

自定義智能線

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

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

請參考下面的代碼：

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

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

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

請參考下面的代碼：

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

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

配置標(biāo)簽距離和電氣間隙

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

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

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

請參考下面的代碼：

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

---

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