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

配置動畫方向

默認(rèn)情況下，當(dāng)?shù)谝淮渭虞d或刷新餅圖/甜甜圈圖時，渲染動畫沿逆時針方向。但是，F(xiàn)usionCharts包含animateClockwise可用于按順時針方向?qū)D表進行動畫處理的屬性。將animateClockwise屬性設(shè)置為1，以順時針方向為圖表設(shè)置動畫。

請參閱下面給出的代碼：

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

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

顯示百分比值和實際值

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

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

• 將showPercentValues屬性設(shè)置為1將百分比值顯示為數(shù)據(jù)標(biāo)簽。
• 將showPercentInTooltip屬性設(shè)置為1以百分比值呈現(xiàn)工具提示的文本。

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

請參閱下面給出的代碼：

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

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

餅圖/圓環(huán)圖內(nèi)的位值

從v3.14.0開始，F(xiàn)usionCharts Suite XT允許您將值分別放置在餅圖和甜甜圈圖的餅圖/甜甜圈切片內(nèi)。這將有助于節(jié)省總體外觀，因為它將畫布區(qū)域保存在圖表之外。

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

valuePosition 屬性只能應(yīng)用于2D圖表，即pie2d和oughnut2d圖表。

請參考下面的代碼：

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

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

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

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

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

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

請參考下面的代碼：

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

僅當(dāng)valuePosition屬性設(shè)置為inside時，此屬性才起作用。

應(yīng)用valuePosition和minAngleForValue屬性后的甜甜圈圖如下所示：

將標(biāo)簽放在餅圖/圓環(huán)圖內(nèi)

現(xiàn)在，您已經(jīng)自定義了餅圖/甜甜圈圖的值的位置，讓我們看看如何將標(biāo)簽分別放置在餅圖和甜甜圈圖的餅圖/甜甜圈切片中。

通過將labelPosition屬性的值設(shè)置為inside****，可以將標(biāo)簽放置在切片內(nèi)。labelPosition屬性的默認(rèn)值為outside。

labelPosition 屬性只能應(yīng)用于2D圖表，即pie2d和oughnut2d圖表。

請參考下面的代碼：

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

labelPosition屬性可以同時應(yīng)用于chart和data級別，即，您可以設(shè)置切片的各個標(biāo)簽的位置。

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

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

帶有l(wèi)abelPosition屬性設(shè)置為inside（在圖表級別）的pie2d如下所示：

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

請參考下面的代碼：

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

僅當(dāng)valuePosition屬性設(shè)置為inside時，此屬性才起作用。

應(yīng)用labelPosition和minAngleForLabel屬性后的甜甜圈圖如下所示：

自定義甜甜圈圖的中心標(biāo)簽

對于甜甜圈圖，您可以配置將在中心標(biāo)簽上呈現(xiàn)的默認(rèn)文本。您還可以配置將鼠標(biāo)指針懸停在甜甜圈片之一上時將在中心標(biāo)簽上呈現(xiàn)的文本。

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

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

請參閱下面給出的代碼：

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

帶有自定義中心標(biāo)簽的甜甜圈圖如下所示：

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