原創(chuàng)|使用教程|編輯:鄭恭琳|2015-12-30 13:31:55.000|閱讀 3317 次
概述:該片教程主要教大家FusionCharts折線圖和面積圖的數(shù)據(jù)標(biāo)簽設(shè)置和管理。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>
相關(guān)鏈接:
通過(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):
高級(jí)的標(biāo)簽管理不適用于Bar、Pie、Doughnut、Marimekko、Zoom Line和Multi-series Combination 3D圖表。
你可以自定義數(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)簽帶有//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)擊查看>>
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn