< FusionChart最新版本下載>
折線圖和面積圖標簽管理
通過標簽管理你可以調整折線圖和面積圖的畫布填充以適應長標簽。這保證了第一個和最后一個X軸標簽渲染到畫布外面以及標簽之間不會彼此重疊。
圖表會自動調整畫布的左右邊距來適應長標簽。2D折線圖的畫布填充標簽管理如下圖所示：
配置了canvasPadding屬性的2D面積圖如下圖所示：
下表是用于設置圖表畫布填充所需的屬性：
| 屬性名稱 |
描述 |
| canvasPadding |
用于設置畫布邊框和第一個數(shù)據(jù)點（或最后一個數(shù)據(jù)點）之間的間距。為0表示第一個和最后一個數(shù)據(jù)錨點將在畫布邊框上。 |
設置折線圖canvasPadding屬性的數(shù)據(jù)結構如下：
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>
高級的X軸標簽管理可以實現(xiàn)：
- 所有X軸標簽必需與對應的列或點居中對齊
- X軸標簽間不能重疊
- X軸標簽不能與其它圖表對象如圖例或X軸名稱重疊
- 長標簽不能超出圖表范圍
- 優(yōu)化長標簽的截斷，在末尾用省略號
高級的標簽管理不適用于Bar、Pie、Doughnut、Marimekko、Zoom Line和Multi-series Combination 3D圖表。
自定義數(shù)據(jù)標簽屬性
你可以自定義數(shù)據(jù)標簽的屬性，如：字體、邊框、背景、透明度。
字體屬性
2D柱狀圖自定義數(shù)據(jù)標簽字體、字體顏色、字體大小效果圖如下：
下表是用于自定義數(shù)據(jù)標簽字體所需屬性：
| 屬性名稱 |
描述 |
| labelFont |
用于設置數(shù)據(jù)標簽的字體。 |
| labelFontColor |
用于設置數(shù)據(jù)標簽字體的顏色。 |
| labelFontSize |
用于設置數(shù)據(jù)標簽字體的大小，從0到72。 |
| labelFontBold |
設置為1加粗數(shù)據(jù)標簽字體。 |
| labelFontItalic |
為1將數(shù)據(jù)標簽字體設置為斜體。 |
| labelAlpha |
用于設置數(shù)據(jù)標簽文本、背景、邊框的透明度，取值從0（透明）到100（不透明）。 |
數(shù)據(jù)結構如下：
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>
邊框屬性
2D柱狀圖表數(shù)據(jù)標簽虛線邊框效果如下圖：
下表是自定義數(shù)據(jù)標簽邊框所需屬性：
| 屬性名稱 |
描述 |
| labelBorderColor |
用于設置數(shù)據(jù)標簽邊框的顏色。 |
| labelBorderAlpha |
用于設置數(shù)據(jù)標簽邊框的透明度，取值從0（透明）到100（不透明）。 |
| labelBorderPadding |
用于設置數(shù)據(jù)標簽與邊框之間的填充。 |
| labelBorderRadius |
用于設置數(shù)據(jù)標簽邊框的直徑（用像素）。 |
| labelBorderThickness |
用于設置數(shù)據(jù)標簽邊框的厚度（用像素）。 |
| labelBorderDashed |
為1將數(shù)據(jù)標簽邊框設置為虛線效果。 |
| labelBorderDashGap |
用于設置數(shù)據(jù)標簽邊框虛線間的空隙（用像素）。 |
| labelBorderDashLen |
用于設置數(shù)據(jù)標簽虛線邊框的虛線長度（用像素）。 |
自定義數(shù)據(jù)標簽邊框的數(shù)據(jù)結構如下：
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ù)標簽背景下過如下：
下表是自定義數(shù)據(jù)標簽背景所需的屬性：
| 屬性名稱 |
描述 |
| labelBgColor |
用于設置數(shù)據(jù)標簽的背景顏色。 |
| labelBgAlpha |
用于設置數(shù)據(jù)標簽背景的透明度。取值從0（透明）到100（不透明）。 |
自定義數(shù)據(jù)標簽背景的數(shù)據(jù)結構如下：
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ù)標簽的高度
下圖是帶有長數(shù)據(jù)標簽的圖表，由于數(shù)據(jù)標簽太長，因此減少了數(shù)據(jù)圖的比例：
你可以使用maxLabelHeight屬性來限制數(shù)據(jù)標簽的最大高度。這會截斷數(shù)據(jù)標簽，用省略號替換。
| 屬性名稱 |
描述 |
| maxLabelHeight |
用于設置數(shù)據(jù)標簽的最大高度（用像素）。 |
設置數(shù)據(jù)標簽最大高度的數(shù)據(jù)結構如下：
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ù)標簽鏈接
數(shù)據(jù)標簽帶有//www.fusioncharts.com/鏈接的2D柱狀圖如下，點擊下面的數(shù)據(jù)標簽，就會鏈接到fusioncharts半島外圍網上直營：
| 屬性名稱 |
描述 |
| labelLink |
用于給每一個數(shù)據(jù)標簽設置鏈接。例如：//www.fusioncharts.com/ |
數(shù)據(jù)結構如下：
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>
購買最新正版授權！詳情請""
2015歲末掃尾之戰(zhàn)！全球廠商攜手放利！優(yōu)惠詳情點擊查看>>
標簽：
JavaScript HTML5圖表圖表庫數(shù)據(jù)可視化圖表解決方案圖表控件FusionCharts圖表
本站文章除注明轉載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
半島外圍網上直營 
5次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線