< FusionChart最新版本下載>
折線圖和面積圖標(biāo)簽管理
通過(guò)標(biāo)簽管理你可以調(diào)整折線圖和面積圖的畫(huà)布填充以適應(yīng)長(zhǎng)標(biāo)簽。這保證了第一個(gè)和最后一個(gè)X軸標(biāo)簽渲染到畫(huà)布外面以及標(biāo)簽之間不會(huì)彼此重疊。
圖表會(huì)自動(dòng)調(diào)整畫(huà)布的左右邊距來(lái)適應(yīng)長(zhǎng)標(biāo)簽。2D折線圖的畫(huà)布填充標(biāo)簽管理如下圖所示：
配置了canvasPadding屬性的2D面積圖如下圖所示：
下表是用于設(shè)置圖表畫(huà)布填充所需的屬性：
| 屬性名稱 |
描述 |
| canvasPadding |
用于設(shè)置畫(huà)布邊框和第一個(gè)數(shù)據(jù)點(diǎn)（或最后一個(gè)數(shù)據(jù)點(diǎn)）之間的間距。為0表示第一個(gè)和最后一個(gè)數(shù)據(jù)錨點(diǎn)將在畫(huà)布邊框上。 |
設(shè)置折線圖canvasPadding屬性的數(shù)據(jù)結(jié)構(gòu)如下：
JSON:
{
"chart": {
"caption": "Quarterly Revenue",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint"
},
"data": [
{
"label": "First Quarter",
"value": "420000"
},
{
"label": "Second Quarter",
"value": "810000"
},
{
"label": "Third Quarter",
"value": "720000"
},
{
"label": "Fourth Quarter",
"value": "550000"
}
]
XML:
<chart caption="Quarterly Revenue" subcaption="Last year" xaxisname="Quarter" yaxisname="Amount (In USD)" numberprefix="$" theme="fint">
< set label="First Quarter" value="420000" />
< set label="Second Quarter" value="810000" />
< set label="Third Quarter" value="720000" />
< set label="Fourth Quarter" value="550000" />
</chart>
高級(jí)的X軸標(biāo)簽管理可以實(shí)現(xiàn)：
- 所有X軸標(biāo)簽必需與對(duì)應(yīng)的列或點(diǎn)居中對(duì)齊
- X軸標(biāo)簽間不能重疊
- X軸標(biāo)簽不能與其它圖表對(duì)象如圖例或X軸名稱重疊
- 長(zhǎng)標(biāo)簽不能超出圖表范圍
- 優(yōu)化長(zhǎng)標(biāo)簽的截?cái)啵谀┪灿檬÷蕴?hào)
高級(jí)的標(biāo)簽管理不適用于Bar、Pie、Doughnut、Marimekko、Zoom Line和Multi-series Combination 3D圖表。
自定義數(shù)據(jù)標(biāo)簽屬性
你可以自定義數(shù)據(jù)標(biāo)簽的屬性，如：字體、邊框、背景、透明度。
字體屬性
2D柱狀圖自定義數(shù)據(jù)標(biāo)簽字體、字體顏色、字體大小效果圖如下：
下表是用于自定義數(shù)據(jù)標(biāo)簽字體所需屬性：
| 屬性名稱 |
描述 |
| labelFont |
用于設(shè)置數(shù)據(jù)標(biāo)簽的字體。 |
| labelFontColor |
用于設(shè)置數(shù)據(jù)標(biāo)簽字體的顏色。 |
| labelFontSize |
用于設(shè)置數(shù)據(jù)標(biāo)簽字體的大小，從0到72。 |
| labelFontBold |
設(shè)置為1加粗?jǐn)?shù)據(jù)標(biāo)簽字體。 |
| labelFontItalic |
為1將數(shù)據(jù)標(biāo)簽字體設(shè)置為斜體。 |
| labelAlpha |
用于設(shè)置數(shù)據(jù)標(biāo)簽文本、背景、邊框的透明度，取值從0（透明）到100（不透明）。 |
數(shù)據(jù)結(jié)構(gòu)如下：
JSON:
{
"chart": {
"theme": "fint",
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"yAxisMaxValue": "1200000",
"rotateValues": "0",
"placeValuesInside": "0",
"numberPrefix": "$",
"labelFont": "Arial",
"labelFontColor": "0075c2",
"labelFontSize": "15"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}
XML:
<chart theme="fint" caption="Monthly Revenue" subcaption="Last year" xaxisname="Month" yaxisname="Amount (In USD)" yaxismaxvalue="1200000" rotatevalues="0" placevaluesinside="0" numberprefix="$" labelfont="Arial" labelfontcolor="0075c2" labelfontsize="15">
< set label="Jan" value="420000" />
< set label="Feb" value="810000" />
< set label="Mar" value="720000" />
< set label="Apr" value="550000" />
< set label="May" value="910000" />
< set label="Jun" value="510000" />
< set label="Jul" value="680000" />
< set label="Aug" value="620000" />
< set label="Sep" value="610000" />
< set label="Oct" value="490000" />
< set label="Nov" value="900000" />
< set label="Dec" value="730000" />
</chart>
邊框?qū)傩?/strong>
2D柱狀圖表數(shù)據(jù)標(biāo)簽虛線邊框效果如下圖：
下表是自定義數(shù)據(jù)標(biāo)簽邊框所需屬性：
| 屬性名稱 |
描述 |
| labelBorderColor |
用于設(shè)置數(shù)據(jù)標(biāo)簽邊框的顏色。 |
| labelBorderAlpha |
用于設(shè)置數(shù)據(jù)標(biāo)簽邊框的透明度，取值從0（透明）到100（不透明）。 |
| labelBorderPadding |
用于設(shè)置數(shù)據(jù)標(biāo)簽與邊框之間的填充。 |
| labelBorderRadius |
用于設(shè)置數(shù)據(jù)標(biāo)簽邊框的直徑（用像素）。 |
| labelBorderThickness |
用于設(shè)置數(shù)據(jù)標(biāo)簽邊框的厚度（用像素）。 |
| labelBorderDashed |
為1將數(shù)據(jù)標(biāo)簽邊框設(shè)置為虛線效果。 |
| labelBorderDashGap |
用于設(shè)置數(shù)據(jù)標(biāo)簽邊框虛線間的空隙（用像素）。 |
| labelBorderDashLen |
用于設(shè)置數(shù)據(jù)標(biāo)簽虛線邊框的虛線長(zhǎng)度（用像素）。 |
自定義數(shù)據(jù)標(biāo)簽邊框的數(shù)據(jù)結(jié)構(gòu)如下：
JSON:
{
"chart": {
"theme": "fint",
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"yAxisMaxValue": "1200000",
"rotateValues": "0",
"placeValuesInside": "0",
"numberPrefix": "$",
"labelFont": "Arial",
"labelFontColor": "0075c2",
"labelFontSize": "15",
"labelBorderColor": "0075c2",
"labelBorderPadding": "5",
"labelBorderRadius": "2",
"labelBorderDashed": "1"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}
XML:
<chart theme="fint" caption="Monthly Revenue" subcaption="Last year" xaxisname="Month" yaxisname="Amount (In USD)" yaxismaxvalue="1200000" rotatevalues="0" placevaluesinside="0" numberprefix="$" labelfont="Arial" labelfontcolor="0075c2" labelfontsize="15" labelbordercolor="0075c2" labelborderpadding="5" labelborderradius="2" labelborderdashed="1">
< set label="Jan" value="420000" />
< set label="Feb" value="810000" />
< set label="Mar" value="720000" />
< set label="Apr" value="550000" />
< set label="May" value="910000" />
< set label="Jun" value="510000" />
< set label="Jul" value="680000" />
< set label="Aug" value="620000" />
< set label="Sep" value="610000" />
< set label="Oct" value="490000" />
< set label="Nov" value="900000" />
< set label="Dec" value="730000" />
</chart>
背景屬性
2D柱狀圖自定義數(shù)據(jù)標(biāo)簽背景下過(guò)如下：
下表是自定義數(shù)據(jù)標(biāo)簽背景所需的屬性：
| 屬性名稱 |
描述 |
| labelBgColor |
用于設(shè)置數(shù)據(jù)標(biāo)簽的背景顏色。 |
| labelBgAlpha |
用于設(shè)置數(shù)據(jù)標(biāo)簽背景的透明度。取值從0（透明）到100（不透明）。 |
自定義數(shù)據(jù)標(biāo)簽背景的數(shù)據(jù)結(jié)構(gòu)如下：
JSON:
{
"chart": {
"theme": "fint",
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"yAxisMaxValue": "1200000",
"rotateValues": "0",
"placeValuesInside": "0",
"numberPrefix": "$",
"labelFont": "Arial",
"labelFontColor": "0075c2",
"labelFontSize": "15",
"labelBorderColor": "0075c2",
"labelBorderPadding": "5",
"labelBorderRadius": "2",
"labelBorderDashed": "1",
"labelBgColor": "eeeeee"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}
XML:
< chart theme="fint" caption="Monthly Revenue" subcaption="Last year" xaxisname="Month" yaxisname="Amount (In USD)" yaxismaxvalue="1200000" rotatevalues="0" placevaluesinside="0" numberprefix="$" labelfont="Arial" labelfontcolor="0075c2" labelfontsize="15" labelbordercolor="0075c2" labelborderpadding="5" labelborderradius="2" labelborderdashed="1" labelbgcolor="eeeeee">
< set label="Jan" value="420000" />
< set label="Feb" value="810000" />
< set label="Mar" value="720000" />
< set label="Apr" value="550000" />
< set label="May" value="910000" />
< set label="Jun" value="510000" />
< set label="Jul" value="680000" />
< set label="Aug" value="620000" />
< set label="Sep" value="610000" />
< set label="Oct" value="490000" />
< set label="Nov" value="900000" />
< set label="Dec" value="730000" />
< /chart>
配置數(shù)據(jù)標(biāo)簽的高度
下圖是帶有長(zhǎng)數(shù)據(jù)標(biāo)簽的圖表，由于數(shù)據(jù)標(biāo)簽太長(zhǎng)，因此減少了數(shù)據(jù)圖的比例：
你可以使用maxLabelHeight屬性來(lái)限制數(shù)據(jù)標(biāo)簽的最大高度。這會(huì)截?cái)鄶?shù)據(jù)標(biāo)簽，用省略號(hào)替換。
| 屬性名稱 |
描述 |
| maxLabelHeight |
用于設(shè)置數(shù)據(jù)標(biāo)簽的最大高度（用像素）。 |
設(shè)置數(shù)據(jù)標(biāo)簽最大高度的數(shù)據(jù)結(jié)構(gòu)如下：
JSON:
{
"chart": {
"theme": "fint",
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"yAxisMaxValue": "1200000",
"rotateValues": "0",
"placeValuesInside": "0",
"numberPrefix": "$",
"labelFont": "Arial",
"labelFontColor": "0075c2",
"labelFontSize": "15",
"maxLabelHeight": "50"
},
"data": [
{
"label": "January [ Q1 ]",
"value": "420000"
},
{
"label": "February [ Q1 ]",
"value": "810000"
},
{
"label": "March [ Q1 ]",
"value": "720000"
},
{
"label": "April [ Q2 ]",
"value": "550000"
},
{
"label": "May [ Q2 ]",
"value": "910000"
},
{
"label": "June [ Q2 ]",
"value": "510000"
},
{
"label": "July [ Q3 ]",
"value": "680000"
},
{
"label": "August [ Q3 ]",
"value": "620000"
},
{
"label": "September [ Q3 ]",
"value": "610000"
},
{
"label": "October [ Q4 ]",
"value": "490000"
},
{
"label": "November [ Q4 ]",
"value": "900000"
},
{
"label": "December [ Q4 ]",
"value": "730000"
}
]
}
XML:
< chart theme="fint" caption="Monthly Revenue" subcaption="Last year" xaxisname="Month" yaxisname="Amount (In USD)" yaxismaxvalue="1200000" rotatevalues="0" placevaluesinside="0" numberprefix="$" labelfont="Arial" labelfontcolor="0075c2" labelfontsize="15" maxlabelheight="50">
< set label="January [ Q1 ]" value="420000" />
< set label="February [ Q1 ]" value="810000" />
< set label="March [ Q1 ]" value="720000" />
< set label="April [ Q2 ]" value="550000" />
< set label="May [ Q2 ]" value="910000" />
< set label="June [ Q2 ]" value="510000" />
< set label="July [ Q3 ]" value="680000" />
< set label="August [ Q3 ]" value="620000" />
< set label="September [ Q3 ]" value="610000" />
< set label="October [ Q4 ]" value="490000" />
< set label="November [ Q4 ]" value="900000" />
< set label="December [ Q4 ]" value="730000" />
< /chart>
添加數(shù)據(jù)標(biāo)簽鏈接
數(shù)據(jù)標(biāo)簽帶有//www.fusioncharts.com/鏈接的2D柱狀圖如下，點(diǎn)擊下面的數(shù)據(jù)標(biāo)簽，就會(huì)鏈接到fusioncharts半島外圍網(wǎng)上直營(yíng)：
| 屬性名稱 |
描述 |
| labelLink |
用于給每一個(gè)數(shù)據(jù)標(biāo)簽設(shè)置鏈接。例如：//www.fusioncharts.com/ |
數(shù)據(jù)結(jié)構(gòu)如下：
JSON:
{
"chart": {
"theme": "fint",
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"yAxisMaxValue": "1200000",
"rotateValues": "0",
"placeValuesInside": "0",
"numberPrefix": "$",
"labelFont": "Arial",
"labelFontColor": "0075c2",
"labelFontSize": "15",
"labelLink": "//www.fusioncharts.com/"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}
XML:
< chart theme="fint" caption="Monthly Revenue" subcaption="Last year" xaxisname="Month" yaxisname="Amount (In USD)" yaxismaxvalue="1200000" rotatevalues="0" placevaluesinside="0" numberprefix="$" labelfont="Arial" labelfontcolor="0075c2" labelfontsize="15" labellink="//www.fusioncharts.com/">
< set label="Jan" value="420000" />
< set label="Feb" value="810000" />
< set label="Mar" value="720000" />
< set label="Apr" value="550000" />
< set label="May" value="910000" />
< set label="Jun" value="510000" />
< set label="Jul" value="680000" />
< set label="Aug" value="620000" />
< set label="Sep" value="610000" />
< set label="Oct" value="490000" />
< set label="Nov" value="900000" />
< set label="Dec" value="730000" />
< /chart>
購(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@ke049m.cn
半島外圍網(wǎng)上直營(yíng) 
5次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
半島外圍網(wǎng)上直營(yíng)相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線