亚洲日本在线播放,小视频h,成人午夜免费视频

FusionCharts使用教程：自定義圖表——折線圖和面積圖標簽管理

原創(chuàng)|使用教程|編輯：鄭恭琳|2015-12-30 13:31:55.000|閱讀 3306 次

概述：該片教程主要教大家FusionCharts折線圖和面積圖的數(shù)據(jù)標簽設置和管理。

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

相關鏈接：

< 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金喜正規(guī)買球：

屬性名稱	描述
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@fc6vip.cn

上一篇：用戶界面框架jQuery EasyUI示例大全之Tabs 下一篇：C1DataGrid for WPF基礎教程：基礎介紹