FusionCharts Suite XT是全面的跨平臺(tái)、跨瀏覽器JavaScript圖表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT 、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至簡(jiǎn)單的HTML頁(yè)面。它是你值得信賴的JavaScript圖表解決方案，目前在全球有45萬(wàn)用戶選擇Fusioncharts來(lái)制作專業(yè)的JavaScript圖表。

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

配置動(dòng)畫方向

默認(rèn)情況下，當(dāng)?shù)谝淮渭虞d或刷新餅圖/甜甜圈圖時(shí)，渲染動(dòng)畫沿逆時(shí)針?lè)较颉５牵現(xiàn)usionCharts包含animateClockwise可用于按順時(shí)針?lè)较驅(qū)D表進(jìn)行動(dòng)畫處理的屬性。將animateClockwise屬性設(shè)置為1，以順時(shí)針?lè)较驗(yàn)閳D表設(shè)置動(dòng)畫。

請(qǐng)參閱下面給出的代碼：

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

下面顯示了配置為沿順時(shí)針?lè)较蜻M(jìn)行動(dòng)畫處理的餅圖。

顯示百分比值和實(shí)際值

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

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

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

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

請(qǐng)參閱下面給出的代碼：

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

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

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

從v3.14.0開(kāi)始，F(xiàn)usionCharts Suite XT允許您將值分別放置在餅圖和甜甜圈圖的餅圖/甜甜圈切片內(nèi)。這將有助于節(jié)省總體外觀，因?yàn)樗鼘嫴紖^(qū)域保存在圖表之外。

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

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

請(qǐng)參考下面的代碼：

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

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

請(qǐng)參閱下面的代碼，顯示特定值的valuePosition屬性：

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

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

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

請(qǐng)參考下面的代碼：

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

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

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

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

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

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

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

請(qǐng)參考下面的代碼：

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

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

請(qǐng)參考下面的代碼，其中顯示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（在圖表級(jí)別）的pie2d如下所示：

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

請(qǐng)參考下面的代碼：

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

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

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

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

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

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

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

請(qǐng)參閱下面給出的代碼：

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

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

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