< FusionChart最新版本下載>
數(shù)據(jù)標(biāo)簽指顯示在圖表的X軸的數(shù)據(jù)點(diǎn)的名稱(chēng)。如下圖所示：
圖中的Jan、Feb、Mar等就是圖表的數(shù)據(jù)標(biāo)簽。
數(shù)據(jù)標(biāo)簽的顯示模式
在FusionCharts中你可以根據(jù)自己的需求來(lái)配置數(shù)據(jù)標(biāo)簽的排列和顯示屬性。FusionCharts提供5種不同的顯示模式。用于設(shè)置數(shù)據(jù)標(biāo)簽顯示模式的屬性如下表所示：
| 屬性名稱(chēng) |
描述 |
| labelDisplay |
用于自定義數(shù)據(jù)標(biāo)簽的對(duì)齊方式。5種可供選擇的選項(xiàng)：auto、wrap、stagger、rotate或none。默認(rèn)情況下該屬性設(shè)置為auto模式。如果你不需要設(shè)置X軸標(biāo)簽，將labelDisplay設(shè)置為none即可。 |
Auto模式
在該模式下圖表自動(dòng)選擇合適的數(shù)據(jù)標(biāo)簽顯示模式-取決于可用的空間。如果數(shù)據(jù)標(biāo)簽的數(shù)量比可用空間大，那么數(shù)據(jù)標(biāo)簽要么截?cái)啵ㄓ檬÷蕴?hào)替換）、包裹或旋轉(zhuǎn)。 當(dāng)鼠標(biāo)懸停在截?cái)嗟臄?shù)據(jù)標(biāo)簽上，將會(huì)顯示完整的標(biāo)簽文本。Auto模式的2D圖表如下圖所示：
在Auto模式自定義數(shù)據(jù)標(biāo)簽所需屬性如下表：
| 屬性名稱(chēng) |
描述 |
| labelDisplay |
用于自定義數(shù)據(jù)標(biāo)簽的對(duì)齊方式。5種可供選擇的模式：auto、wrap、stagger、rotate或none。默認(rèn)情況下設(shè)置為auto模式。 |
| useEllipsesWhenOverflow |
當(dāng)使用auto模式，長(zhǎng)數(shù)據(jù)標(biāo)簽被截?cái)嘤檬÷蕴?hào)替換超出X軸范圍的部分。默認(rèn)值為1。 |
設(shè)置auto模式的數(shù)據(jù)結(jié)構(gòu)如下：
JSON:
{
"chart": {
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint",
"labelDisplay": "auto"
},
"data": [
{
"label": "January",
"value": "420000"
},
{
"label": "February",
"value": "810000"
},
{
"label": "March",
"value": "720000"
},
{
"label": "April",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "June",
"value": "510000"
},
{
"label": "July",
"value": "680000"
},
{
"label": "August",
"value": "620000"
},
{
"label": "September",
"value": "610000"
},
{
"label": "October",
"value": "490000"
},
{
"label": "November",
"value": "900000"
},
{
"label": "December",
"value": "730000"
}
]
}
XML:
<chart caption="Monthly Revenue" subcaption="Last year" xaxisname="Month" yaxisname="Amount (In USD)" numberprefix="$" theme="fint" labeldisplay="auto">
< set label="January" value="420000" />
< set label="February" value="810000" />
< set label="March" value="720000" />
< set label="April" value="550000" />
< set label="May" value="910000" />
< set label="June" value="510000" />
< set label="July" value="680000" />
< set label="August" value="620000" />
< set label="September" value="610000" />
< set label="October" value="490000" />
< set label="November" value="900000" />
< set label="December" value="730000" />
</chart>
Wrap模式
該模式下，你可以將長(zhǎng)數(shù)據(jù)標(biāo)簽顯示在多行里。如果圖表的可用空間不夠，該模式會(huì)自動(dòng)截?cái)鄻?biāo)簽并且在末尾加上省略號(hào)。
設(shè)置wrap模式的數(shù)據(jù)標(biāo)簽所需屬性如下表：
| 屬性名稱(chēng) |
描述 |
| labelDisplay |
用于自定義數(shù)據(jù)標(biāo)簽的對(duì)齊方式。5種可供選擇的模式：auto、wrap、stagger、rotate或none。默認(rèn)情況下設(shè)置為auto模式。 |
上圖所示wrap模式標(biāo)簽的數(shù)據(jù)結(jié)構(gòu)如下：
JSON:
{
"chart": {
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint",
"labelDisplay": "wrap"
},
"data": [
{
"label": "Jan, 2015",
"value": "420000"
},
{
"label": "Feb, 2015",
"value": "810000"
},
{
"label": "Mar, 2015",
"value": "720000"
},
{
"label": "Apr, 2015",
"value": "550000"
},
{
"label": "May, 2015",
"value": "910000"
},
{
"label": "Jun, 2015",
"value": "510000"
},
{
"label": "Jul, 2015",
"value": "680000"
},
{
"label": "Aug, 2015",
"value": "620000"
},
{
"label": "Sep, 2015",
"value": "610000"
},
{
"label": "Oct, 2015",
"value": "490000"
},
{
"label": "Nov, 2015",
"value": "900000"
},
{
"label": "Dec, 2015",
"value": "730000"
}
]
}
Rotate模式
2D柱狀圖旋轉(zhuǎn)模式下的傾斜數(shù)據(jù)標(biāo)簽如下圖所示：
旋轉(zhuǎn)數(shù)據(jù)標(biāo)簽所需屬性如下表：
| 屬性名稱(chēng) |
描述 |
| labelDisplay |
用于自定義數(shù)據(jù)標(biāo)簽的對(duì)齊方式。5種可供選擇的模式：auto、wrap、stagger、rotate或none。默認(rèn)情況下設(shè)置為auto模式。 |
| slantLabels |
在rotate模式下，設(shè)置為1將標(biāo)簽傾斜45度，設(shè)置為0（默認(rèn)）使數(shù)據(jù)標(biāo)簽垂直。 |
上圖所示的rotate模式的數(shù)據(jù)標(biāo)簽數(shù)據(jù)結(jié)構(gòu)如下：
JSON:
{
"chart": {
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint",
"labelDisplay": "rotate",
"slantLabels": "1"
},
"data": [
{
"label": "January",
"value": "420000"
},
{
"label": "February",
"value": "810000"
},
{
"label": "March",
"value": "720000"
},
{
"label": "April",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "June",
"value": "510000"
},
{
"label": "July",
"value": "680000"
},
{
"label": "August",
"value": "620000"
},
{
"label": "September",
"value": "610000"
},
{
"label": "October",
"value": "490000"
},
{
"label": "November",
"value": "900000"
},
{
"label": "December",
"value": "730000"
}
]
}
帶有交錯(cuò)線的Staggered模式
在該模式下數(shù)據(jù)標(biāo)簽被分布在多個(gè)層次進(jìn)行顯示以增加每個(gè)層次標(biāo)簽的顯示空間（默認(rèn)是2層）。如下圖所示：
設(shè)置Staggered模式所需屬性如下表：
| 屬性名稱(chēng) |
描述 |
| labelDisplay |
用于自定義數(shù)據(jù)標(biāo)簽的對(duì)齊方式。5種可供選擇的模式：auto、wrap、stagger、rotate或none。默認(rèn)情況下設(shè)置為auto模式。 |
| staggerLines |
指定交錯(cuò)模式的層數(shù)。默認(rèn)值2。 |
上圖所示的交錯(cuò)模式數(shù)據(jù)標(biāo)簽數(shù)據(jù)結(jié)構(gòu)如下：
JSON:
{
"chart": {
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint",
"labelDisplay": "stagger",
"staggerLines": "3"
},
"data": [
{
"label": "January",
"value": "420000"
},
{
"label": "February",
"value": "810000"
},
{
"label": "March",
"value": "720000"
},
{
"label": "April",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "June",
"value": "510000"
},
{
"label": "July",
"value": "680000"
},
{
"label": "August",
"value": "620000"
},
{
"label": "September",
"value": "610000"
},
{
"label": "October",
"value": "490000"
},
{
"label": "November",
"value": "900000"
},
{
"label": "December",
"value": "730000"
}
]
}
N-th Label模式
如果你的數(shù)據(jù)圖呈現(xiàn)的是連續(xù)的數(shù)值。如日期、事件、溫度等。你可以使用labelstep屬性來(lái)顯示每第N個(gè)標(biāo)簽，而不用顯示所有標(biāo)簽。如下圖：
設(shè)置N-th Label模式數(shù)據(jù)標(biāo)簽所需屬性如下表：
| 屬性名稱(chēng) |
描述 |
| labelDisplay |
用于自定義數(shù)據(jù)標(biāo)簽的對(duì)齊方式。5種可供選擇的模式：auto、wrap、stagger、rotate或none。默認(rèn)情況下設(shè)置為auto模式。 |
| labelStep |
設(shè)置n的值，用于顯示第一個(gè)標(biāo)簽和從左到右的每第n個(gè)數(shù)。例如：一個(gè)圖表顯示12個(gè)月的數(shù)據(jù)，labelStep設(shè)置為3，那么將顯示January、April、July、October，其余的標(biāo)簽將被跳過(guò)。 |
上圖所示的N-th Label模式標(biāo)簽的數(shù)據(jù)結(jié)構(gòu)如下：
JSON:
{
"chart": {
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint",
"labelStep": "3"
},
"data": [
{
"label": "January",
"value": "420000"
},
{
"label": "February",
"value": "810000"
},
{
"label": "March",
"value": "720000"
},
{
"label": "April",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "June",
"value": "510000"
},
{
"label": "July",
"value": "680000"
},
{
"label": "August",
"value": "620000"
},
{
"label": "September",
"value": "610000"
},
{
"label": "October",
"value": "490000"
},
{
"label": "November",
"value": "900000"
},
{
"label": "December",
"value": "730000"
}
]
}
顯示指定的數(shù)據(jù)標(biāo)簽
你可以通過(guò)使用showLabels和showLabel屬性來(lái)顯示指定的數(shù)據(jù)標(biāo)簽。如下圖所示：
下表是顯示指定數(shù)據(jù)標(biāo)簽所需的屬性：
| 屬性名稱(chēng) |
描述 |
| showLabels |
在整個(gè)圖表和數(shù)據(jù)集層面顯示或隱藏?cái)?shù)據(jù)標(biāo)簽。設(shè)置為1顯示所有標(biāo)簽；設(shè)置為0隱藏所有標(biāo)簽。 |
| showLabel |
用于顯示或隱藏?cái)?shù)據(jù)層的單個(gè)數(shù)據(jù)值的標(biāo)簽。該屬性將覆蓋‘showLabels’屬性的設(shè)置。 |
上圖所示圖表的數(shù)據(jù)結(jié)構(gòu)如下：
JSON:
{
"chart": {
"caption": "Quarterly Revenue",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint",
"showLabels": "0"
},
"data": [
{
"label": "Quarter 1",
"value": "1950000"
},
{
"label": "Quarter 2",
"value": "1450000",
"showLabel": "1"
},
{
"label": "Quarter 3",
"value": "1730000"
},
{
"label": "Quarter 4",
"value": "2120000"
}
]
}
購(gòu)買(mǎi)最新正版授權(quán)！詳情請(qǐng)""
2015歲末掃尾之戰(zhàn)！全球廠商攜手放利！優(yōu)惠詳情點(diǎn)擊查看>>
標(biāo)簽：
JavaScript HTML5圖表圖表庫(kù)數(shù)據(jù)可視化圖表解決方案圖表控件FusionCharts圖表
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn
金喜正規(guī)買(mǎi)球 
25次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
金喜正規(guī)買(mǎi)球相關(guān)的文章 
微信
在線咨詢(xún)
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線