玖玖爱在线视频观看,日韩高清一区,日本人妻乱码

欧美日韩亚-欧美日韩亚州在线-欧美日韩亚洲-欧美日韩亚洲第一区-欧美日韩亚洲二区在线-欧美日韩亚洲高清精品

FusionCharts使用教程：自定義圖表——邊框和背景

原創(chuàng)|使用教程|編輯：鄭恭琳|2015-11-27 10:56:56.000|閱讀 3320 次

概述：圖表的背景是指圖表繪制的整個地區(qū)，由圖表邊框包圍。這篇教程將教大家如何配置圖表的邊框和背景。

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

相關(guān)鏈接：

圖表的背景是指圖表繪制的整個地區(qū)，由圖表邊框包圍。這篇教程將從四個方面教大家配置圖表的邊框和背景。

自定義圖表邊框

FusionCharts的2D圖表有一個默認(rèn)的邊框，而3D圖表沒有，但你可以設(shè)置一個。2D圖表的自定義邊框如下：

下表是自定義圖表邊框的一些屬性及簡要說明：

屬性名稱	描述
showBorder	用來指定是否要顯示邊框。屬性值為1時顯示；屬性值為0時不顯示。
borderColor	用來指定邊框的顏色。
borderThickness	用來指定邊框的厚度。
borderAlpha	用來指定邊框的透明度，從0到100。0表示完全透明，100表示完全不透明。

使用這些屬性來自定義圖表邊界所需的數(shù)據(jù)結(jié)構(gòu)如下：
JSON:

{
    "chart": {
        "caption": "Monthly Revenue",
        "subCaption": "Last year",
        "xAxisName": "Month",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "showBorder": "1",
        "borderColor": "#666666",
        "borderThickness": "4",
        "borderAlpha": "80",
        "theme": "fint"
    },
    "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 caption="Monthly Revenue" subcaption="Last year" xaxisname="Month" yaxisname="Amount (In USD)" numberprefix="$" showborder="1" bordercolor="#666666" borderthickness="4" borderalpha="80" theme="fint">
    < 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ū)域，2D圖表的自定義背景顏色如下圖所示：

下表是用于自定義圖表背景的屬性：

屬性名稱	描述
bgColor	用于指定圖表的背景顏色。
bgAlpha	用于指定圖表背景的透明度。

自定義圖表背景所需的數(shù)據(jù)結(jié)構(gòu)如下：
JSON:

{
    "chart": {
        "caption": "Monthly Revenue",
        "subCaption": "Last year",
        "xAxisName": "Month",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "canvasBgAlpha": "0",
        "bgColor": "#DDDDDD",
        "bgAlpha": "50",
        "theme": "fint"
    },
    "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 caption="Monthly Revenue" subcaption="Last year" xaxisname="Month" yaxisname="Amount (In USD)" numberprefix="$" canvasbgalpha="0" bgcolor="#DDDDDD" bgalpha="50" theme="fint">
    < 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>

使用漸變填充背景

當(dāng)時用漸變來填充圖標(biāo)背景時，你需要配置以下三個方面：

設(shè)置漸變透明度
設(shè)置顏色分布的比例
設(shè)置漸變的角度

2D圖表的漸變填充背景如下圖所示：

下表是自定義填充背景所需的屬性：

屬性名稱	描述
bgColor	用于指定背景顏色。
bgAlpha	用于指定每種顏色的透明度。
bgRatio	用于指定漸變中每種顏色的比例。

自定義漸變填充背景所需數(shù)據(jù)結(jié)構(gòu)如下：
JSON:

{
    "chart": {
        "caption": "Monthly Revenue",
        "subCaption": "Last year",
        "xAxisName": "Month",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "canvasBgAlpha": "0",
        "bgColor": "EEEEEE,CCCCCC",
        "bgratio": "60,40",
        "bgAlpha": "70,80",
        "theme": "fint"
    },
    "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 caption="Monthly Revenue" subcaption="Last year" xaxisname="Month" yaxisname="Amount (In USD)" numberprefix="$" canvasbgalpha="0" bgcolor="EEEEEE,CCCCCC" bgratio="60,40" bgalpha="70,80" theme="fint">
    < 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>

使用外部圖片填充背景

你也可以使用外部圖像（只能是GIF、JPEG或PNG）作為圖表的背景，如下圖所示：

使用外部圖像作為圖表背景涉及屬性如下表所示：

屬性名稱	描述
bgImage	用于指定圖表背景圖片的URL。

設(shè)置外部圖片作為圖表背景的數(shù)據(jù)結(jié)構(gòu)如下：
JSON:

{
    "chart": {
        "caption": "Top 3 Juice Flavors by sales",
        "subCaption": "Last year",
        "xAxisName": "Flavor",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "canvasBgAlpha": "0",
        "showAlternateHgridColor": "1",
        "bgImage": "//upload.wikimedia.org/wikipedia/commons/7/79/Misc_fruit.jpg",
        "bgImageAlpha": "40",
        "bgImageDisplayMode": "stretch",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Apple",
            "value": "810000"
        },
        {
            "label": "Cranberry",
            "value": "620000"
        },
        {
            "label": "Grapes",
            "value": "350000"
        }
    ]
}

XML:

<chart caption="Top 3 Juice Flavors by sales" subcaption="Last year" xaxisname="Flavor" yaxisname="Amount (In USD)" numberprefix="$" canvasbgalpha="0" showalternatehgridcolor="1" bgimage="//upload.wikimedia.org/wikipedia/commons/7/79/Misc_fruit.jpg" bgimagealpha="40" bgimagedisplaymode="stretch" theme="fint">
    < set label="Apple" value="810000" />
    < set label="Cranberry" value="620000" />
    < set label="Grapes" value="350000" />
</chart>

自定義背景圖片

FusionCharts還允許你對圖表背景圖片進(jìn)行自定義操作：

指定背景圖像的透明度
指定顯示模式
設(shè)置圖像的定位
設(shè)置圖像的規(guī)模

部分透明背景的2D圖表如下圖所示：

下表是自定義圖表背景圖像所需的屬性：

屬性名稱	描述
bgImage	用于指定圖片的URL。
bgImageAlpha	用于指定圖片的透明度。
bgImageVAlign, bgImageHAlign	用于指定圖像的水平和垂直對齊方式。
bgImageScale	用于放大或縮小圖像的比例。
bgImageDisplayMode	用于指定圖像的顯示模式。

自定義背景圖片透明度的數(shù)據(jù)結(jié)構(gòu)如下：
JSON:

{
    "chart": {
        "caption": "Top 3 Juice Flavors",
        "subCaption": "Last year",
        "xAxisName": "Flavor",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "canvasBgAlpha": "0",
        "showAlternateHgridColor": "1",
        "bgImage": "//upload.wikimedia.org/wikipedia/commons/7/79/Misc_fruit.jpg",
        "bgImageAlpha": "25",
        "bgImageDisplayMode": "stretch",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Apple",
            "value": "810000"
        },
        {
            "label": "Cranberry",
            "value": "620000"
        },
        {
            "label": "Grapes",
            "value": "350000"
        }
    ]
}

XML:

<chart caption="Top 3 Juice Flavors" subcaption="Last year" xaxisname="Flavor" yaxisname="Amount (In USD)" numberprefix="$" canvasbgalpha="0" showalternatehgridcolor="1" bgimage="//upload.wikimedia.org/wikipedia/commons/7/79/Misc_fruit.jpg" bgimagealpha="25" bgimagedisplaymode="stretch" theme="fint">
    < set label="Apple" value="810000" />
    < set label="Cranberry" value="620000" />
    < set label="Grapes" value="350000" />
</chart>

購買最新正版授權(quán)！""

慧都年終盛典火爆開啟，一年僅一次的最強(qiáng)促銷，破冰鉅惠不容錯過！！優(yōu)惠詳情點(diǎn)擊查看>>

標(biāo)簽：JavaScript 圖表圖表庫數(shù)據(jù)可視化圖表解決方案圖表控件 FusionCharts圖表

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn

上一篇：LEADTOOLS使用教程：支票讀取和處理下一篇：Qt使用教程：指定運(yùn)行設(shè)置（三）