< FusionChart最新版本下載>
數據標簽指顯示在圖表的X軸的數據點的名稱。如下圖所示：
圖中的Jan、Feb、Mar等就是圖表的數據標簽。
數據標簽的顯示模式
在FusionCharts中你可以根據自己的需求來配置數據標簽的排列和顯示屬性。FusionCharts提供5種不同的顯示模式。用于設置數據標簽顯示模式的屬性如下表所示：
| 屬性名稱 |
描述 |
| labelDisplay |
用于自定義數據標簽的對齊方式。5種可供選擇的選項：auto、wrap、stagger、rotate或none。默認情況下該屬性設置為auto模式。如果你不需要設置X軸標簽，將labelDisplay設置為none即可。 |
Auto模式
在該模式下圖表自動選擇合適的數據標簽顯示模式-取決于可用的空間。如果數據標簽的數量比可用空間大，那么數據標簽要么截斷（用省略號替換）、包裹或旋轉。 當鼠標懸停在截斷的數據標簽上，將會顯示完整的標簽文本。Auto模式的2D圖表如下圖所示：
在Auto模式自定義數據標簽所需屬性如下表：
| 屬性名稱 |
描述 |
| labelDisplay |
用于自定義數據標簽的對齊方式。5種可供選擇的模式：auto、wrap、stagger、rotate或none。默認情況下設置為auto模式。 |
| useEllipsesWhenOverflow |
當使用auto模式，長數據標簽被截斷用省略號替換超出X軸范圍的部分。默認值為1。 |
設置auto模式的數據結構如下：
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模式
該模式下，你可以將長數據標簽顯示在多行里。如果圖表的可用空間不夠，該模式會自動截斷標簽并且在末尾加上省略號。
設置wrap模式的數據標簽所需屬性如下表：
| 屬性名稱 |
描述 |
| labelDisplay |
用于自定義數據標簽的對齊方式。5種可供選擇的模式：auto、wrap、stagger、rotate或none。默認情況下設置為auto模式。 |
上圖所示wrap模式標簽的數據結構如下：
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柱狀圖旋轉模式下的傾斜數據標簽如下圖所示：
旋轉數據標簽所需屬性如下表：
| 屬性名稱 |
描述 |
| labelDisplay |
用于自定義數據標簽的對齊方式。5種可供選擇的模式：auto、wrap、stagger、rotate或none。默認情況下設置為auto模式。 |
| slantLabels |
在rotate模式下，設置為1將標簽傾斜45度，設置為0（默認）使數據標簽垂直。 |
上圖所示的rotate模式的數據標簽數據結構如下：
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"
}
]
}
帶有交錯線的Staggered模式
在該模式下數據標簽被分布在多個層次進行顯示以增加每個層次標簽的顯示空間（默認是2層）。如下圖所示：
設置Staggered模式所需屬性如下表：
| 屬性名稱 |
描述 |
| labelDisplay |
用于自定義數據標簽的對齊方式。5種可供選擇的模式：auto、wrap、stagger、rotate或none。默認情況下設置為auto模式。 |
| staggerLines |
指定交錯模式的層數。默認值2。 |
上圖所示的交錯模式數據標簽數據結構如下：
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模式
如果你的數據圖呈現的是連續的數值。如日期、事件、溫度等。你可以使用labelstep屬性來顯示每第N個標簽，而不用顯示所有標簽。如下圖：
設置N-th Label模式數據標簽所需屬性如下表：
| 屬性名稱 |
描述 |
| labelDisplay |
用于自定義數據標簽的對齊方式。5種可供選擇的模式：auto、wrap、stagger、rotate或none。默認情況下設置為auto模式。 |
| labelStep |
設置n的值，用于顯示第一個標簽和從左到右的每第n個數。例如：一個圖表顯示12個月的數據，labelStep設置為3，那么將顯示January、April、July、October，其余的標簽將被跳過。 |
上圖所示的N-th Label模式標簽的數據結構如下：
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"
}
]
}
顯示指定的數據標簽
你可以通過使用showLabels和showLabel屬性來顯示指定的數據標簽。如下圖所示：
下表是顯示指定數據標簽所需的屬性：
| 屬性名稱 |
描述 |
| showLabels |
在整個圖表和數據集層面顯示或隱藏數據標簽。設置為1顯示所有標簽；設置為0隱藏所有標簽。 |
| showLabel |
用于顯示或隱藏數據層的單個數據值的標簽。該屬性將覆蓋‘showLabels’屬性的設置。 |
上圖所示圖表的數據結構如下：
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"
}
]
}
購買最新正版授權！詳情請""
2015歲末掃尾之戰！全球廠商攜手放利！優惠詳情點擊查看>>
標簽：
JavaScript HTML5圖表圖表庫數據可視化圖表解決方案圖表控件FusionCharts圖表
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
半島外圍網上直營 
4次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線