JavaScript圖表工具FusionCharts入門教程（23）：將值、標簽放置在餅圖/甜甜圈圖中

---

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

配置動畫方向

默認情況下，當第一次加載或刷新餅圖/甜甜圈圖時，渲染動畫沿逆時針方向。但是，FusionCharts包含animateClockwise可用于按順時針方向對圖表進行動畫處理的屬性。將animateClockwise屬性設置為1，以順時針方向為圖表設置動畫。

請參閱下面給出的代碼：

{
  "chart": {
    "animateClockwise": "1"
  }
}

下面顯示了配置為沿順時針方向進行動畫處理的餅圖。

顯示百分比值和實際值

默認情況下，對于餅圖，實際數據值顯示在圖表以及工具提示中。但是，您可以選擇在圖表上顯示百分比值，同時在工具提示中保留實際值。

要在圖表中顯示百分比值和實際值，請執行以下步驟：

• 將showPercentValues屬性設置為1將百分比值顯示為數據標簽。
• 將showPercentInTooltip屬性設置為1以百分比值呈現工具提示的文本。

如果要在圖表上顯示百分比值，并在甜甜圈圖的工具提示中顯示實際值，則可以使用showPercentValues和showPercentInTooltip屬性。

請參閱下面給出的代碼：

{
  "chart": {
    "showPercentValues": "1",
    "showPercentInTooltip": "0"
  }
}

配置為在圖表上顯示百分比值的pie2D圖表如下所示：

餅圖/圓環圖內的位值

從v3.14.0開始，FusionCharts Suite XT允許您將值分別放置在餅圖和甜甜圈圖的餅圖/甜甜圈切片內。這將有助于節省總體外觀，因為它將畫布區域保存在圖表之外。

您可以通過將新添加的屬性valuePosition的值設置為inside來將值放置在切片中。 valuePosition屬性的默認值為outside。

valuePosition 屬性只能應用于2D圖表，即pie2d和oughnut2d圖表。

請參考下面的代碼：

{
  "chart": {
    "valuePosition": "inside"
  }
}

valuePosition屬性可以同時應用于chart和data級別，即，您可以設置切片的各個值的位置。

請參閱下面的代碼，顯示特定值的valuePosition屬性：

{
    "chart": {
        ...
    },
    "data": [{
            "label": "Food",
            "value": "285040"
        },
        {
            "label": "Apparels",
            "value": "146330",
            "valuePosition": "inside"
        },
        {
            "label": "Electronics",
            "value": "105070"
        },
        {
            "label": "Household",
            "value": "49100"
        }
    ]
}

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

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

請參考下面的代碼：

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

僅當valuePosition屬性設置為inside時，此屬性才起作用。

應用valuePosition和minAngleForValue屬性后的甜甜圈圖如下所示：

將標簽放在餅圖/圓環圖內

現在，您已經自定義了餅圖/甜甜圈圖的值的位置，讓我們看看如何將標簽分別放置在餅圖和甜甜圈圖的餅圖/甜甜圈切片中。

通過將labelPosition屬性的值設置為inside****，可以將標簽放置在切片內。labelPosition屬性的默認值為outside。

labelPosition 屬性只能應用于2D圖表，即pie2d和oughnut2d圖表。

請參考下面的代碼：

{
  "chart": {
    "labelPosition": "inside"
  }
}

labelPosition屬性可以同時應用于chart和data級別，即，您可以設置切片的各個標簽的位置。

請參考下面的代碼，其中顯示labelPosition了特定值的屬性：

{
    "chart": {
        ...
    },
    "data": [{
            "label": "Food",
            "value": "285040"
        },
        {
            "label": "Apparels",
            "value": "146330",
            "labelPosition": "inside"
        },
        {
            "label": "Electronics",
            "value": "105070"
        },
        {
            "label": "Household",
            "value": "49100"
        }
    ]
}

帶有labelPosition屬性設置為inside（在圖表級別）的pie2d如下所示：

在餅圖/甜甜圈圖中，由于空間不足，有時更改標簽的位置可能會彼此重疊。 對于這種情況，引入了新屬性minAngleForLabel，該屬性設置最小比例角度以呈現餅圖/甜甜圈圖的標簽。

請參考下面的代碼：

{
  "chart": {
    "labelPosition": "inside",
    "minAngleForLabel": "75"
  }
}

僅當valuePosition屬性設置為inside時，此屬性才起作用。

應用labelPosition和minAngleForLabel屬性后的甜甜圈圖如下所示：

自定義甜甜圈圖的中心標簽

對于甜甜圈圖，您可以配置將在中心標簽上呈現的默認文本。您還可以配置將鼠標指針懸停在甜甜圈片之一上時將在中心標簽上呈現的文本。

要自定義圖表的中心標簽，請按照以下步驟操作：

• 使用defaultCenterLabel屬性指定中心標簽的文本。
• 使用centerLabel屬性指定甜甜圈切片的懸停文本。

請參閱下面給出的代碼：

{
  "chart": {
    "defaultCenterLabel": "Total revenue: $60K",
    "centerLabel": "$value"
  }
}

帶有自定義中心標簽的甜甜圈圖如下所示：

---

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