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

---

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

設置起始角度

默認情況下，餅圖/甜甜圈圖從0°角開始繪制。該圖表允許您顯式設置起始角度。指定startingAngle屬性設置餅圖/甜甜圈圖的起始角度。第一個餅圖切片將從此屬性中指定的角度度量開始繪制。

請參閱下面給出的代碼：

{
  "chart": {
    "startingAngle": "45"
  }
}

起始角設置為45°的餅圖如下所示：

切片餡餅/甜甜圈

默認情況下，當餅圖/甜甜圈圖首次呈現時，將切入所有切片。但是，要突出顯示一個切片，您可能希望在圖表首次加載時將其切成薄片。isSliced屬性可用于指定餅圖將被切成一切片的形式呈現。將該屬性設置1為餅圖切片，以呈現切出的切片。此屬性屬于data對象。
請參閱下面給出的代碼：

{
  "data": {
    "label": "Household",
    "value": "49100",
    "isSliced": "1"
}

一片切成薄片的餅圖如下所示：

配置切片距離

切出餡餅/甜甜圈切片時，您可以配置中心和切出的切片之間的距離。使用slicingDistance屬性設置圖表中心和切出的切片之間的距離（以像素為單位）。

請參閱下面給出的代碼：

{
  "chart": {
    "slicingDistance": "10"
  }
}

配置了切片距離的圖表如下所示：

配置斜角效果

對于餅圖/甜甜圈圖，您可以配置斜角效果以使用3D效果渲染圖表。設置use3DLighting屬性以1指定是否將使用高級漸變和陰影效果來創建外觀更好的圖表。

使用radius3D屬性設置圖表的3D半徑。在3D照明模式下繪制圖表時，使用此屬性可以以百分比形式設置半徑。從根本上說，它有助于設置餡餅/甜甜圈的斜角距離。

請參閱下面給出的代碼：

{
  "chart": {
    "use3DLighting": "1",
    "radius3D": "50"
  }
}

為斜角效果配置的餅圖如下所示：

---

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