日韩在线1,天天天天干,在线黄片com

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

FusionCharts使用教程：自定義圖表——零平面

原創(chuàng)|使用教程|編輯：鄭恭琳|2016-01-12 12:09:30.000|閱讀 1095 次

概述：零平面是分離圖表y軸正數(shù)和負數(shù)的平面，當(dāng)圖表包含正數(shù)值和負數(shù)值時是默認被渲染。零平面出現(xiàn)在柱狀圖、折線圖、散點圖、氣泡圖以及面積圖中。此外，散點圖和氣泡圖表也支持X軸上的垂直零平面。

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

相關(guān)鏈接：

FusionCharts目前已更新至v3.10.0版本>>點擊了解FusionCharts v3.10.0更新詳情

< FusionChart最新版本下載>

在2D、3D圖表中自定義零平面

2D圖表中的零平面

帶有自定義零平面的2D柱狀圖如下：

下表是自定義2D圖表的零平面所需屬性：

屬性名稱	描述
zeroPlaneColor	如果指定了16進制的顏色代碼，那么零平面將被渲染。
zeroPlaneThickness	設(shè)置零平面的厚度。
zeroPlaneAlpha	設(shè)置零平面的透明度，取值從0到100。

上圖所示的帶有零平面的2D圖表數(shù)據(jù)結(jié)構(gòu)如下：

JSON:

{
    "chart": {
        "caption": "Website Visitors WoW Growth",
        "subcaption": "Last 10 weeks",
        "xAxisName": "Week",
        "yAxisName": "Growth",
        "numberSuffix": "%",
        "theme": "fint",
        "showValues": "0",
        "showZeroPlane": "1",
        "zeroPlaneColor": "#003366",
        "zeroPlaneAlpha": "100",
        "zeroPlaneThickness": "3",
        "divLineDashed": "0",
        "divLineAlpha": "40"
    },
    "data": [
        {
            "label": "Week 1",
            "value": "14.5"
        },
        {
            "label": "Week 2",
            "value": "-6.5"
        },
        {
            "label": "Week 3",
            "value": "9.8"
        },
        {
            "label": "Week 4",
            "value": "9.2"
        },
        {
            "label": "Week 5",
            "value": "-7.45"
        },
        {
            "label": "Week 6",
            "value": "-3.19"
        },
        {
            "label": "Week 7",
            "value": "-11.78"
        },
        {
            "label": "Week 8",
            "value": "3.32"
        },
        {
            "label": "Week 9",
            "value": "8.57"
        },
        {
            "label": "Week 10",
            "value": "16.95"
        }
    ]
}

XML:

< chart caption="Website Visitors WoW Growth" subcaption="Last 10 weeks" xaxisname="Week" yaxisname="Growth" numbersuffix="%" theme="fint" showvalues="0" showzeroplane="1" zeroplanecolor="#003366" zeroplanealpha="100" zeroplanethickness="3" divlinedashed="0" divlinealpha="40">
    < set label="Week 1" value="14.5" />
    < set label="Week 2" value="-6.5" />
    < set label="Week 3" value="9.8" />
    < set label="Week 4" value="9.2" />
    < set label="Week 5" value="-7.45" />
    < set label="Week 6" value="-3.19" />
    < set label="Week 7" value="-11.78" />
    < set label="Week 8" value="3.32" />
    < set label="Week 9" value="8.57" />
    < set label="Week 10" value="16.95" />
< /chart>

3D圖表中的零平面

帶有自定義零平面的3D柱狀圖如下：

下表是自定義3D圖表的零平面所需屬性：

屬性名稱	描述
zeroPlaneColor	如果指定了16進制的顏色代碼，那么零平面將被渲染。
zeroPlaneAlpha	設(shè)置零平面的透明度，取值從0到100。
zeroPlaneShowBorder	設(shè)置為1顯示零平面的邊框；設(shè)置為0隱藏零平面的邊框。
zeroPlaneBorderColor	如果指定了16進制的顏色代碼，那么零平面的邊框?qū)⒈讳秩尽?/td>

上圖所示的帶有零平面的3D圖表數(shù)據(jù)結(jié)構(gòu)如下：

JSON:

{
    "chart": {
        "caption": "Website Visitors WoW Growth",
        "subcaption": "Last 10 weeks",
        "xAxisName": "Week",
        "yAxisName": "Growth",
        "numberSuffix": "%",
        "theme": "fint",
        "showValues": "0",
        "showZeroPlane": "1",
        "zeroPlaneColor": "#99ccff",
        "zeroPlaneAlpha": "100",
        "zeroPlaneThickness": "3",
        "divLineDashed": "0",
        "divLineAlpha": "40"
    },
    "data": [
        {
            "label": "Week 1",
            "value": "14.5"
        },
        {
            "label": "Week 2",
            "value": "-6.5"
        },
        {
            "label": "Week 3",
            "value": "9.8"
        },
        {
            "label": "Week 4",
            "value": "9.2"
        },
        {
            "label": "Week 5",
            "value": "-7.45"
        },
        {
            "label": "Week 6",
            "value": "-3.19"
        },
        {
            "label": "Week 7",
            "value": "-11.78"
        },
        {
            "label": "Week 8",
            "value": "3.32"
        },
        {
            "label": "Week 9",
            "value": "8.57"
        },
        {
            "label": "Week 10",
            "value": "16.95"
        }
    ]
}

XML:

< chart caption="Website Visitors WoW Growth" subcaption="Last 10 weeks" xaxisname="Week" yaxisname="Growth" numbersuffix="%" theme="fint" showvalues="0" showzeroplane="1" zeroplanecolor="#99ccff" zeroplanealpha="100" zeroplanethickness="3" divlinedashed="0" divlinealpha="40">
    < set label="Week 1" value="14.5" />
    < set label="Week 2" value="-6.5" />
    < set label="Week 3" value="9.8" />
    < set label="Week 4" value="9.2" />
    < set label="Week 5" value="-7.45" />
    < set label="Week 6" value="-3.19" />
    < set label="Week 7" value="-11.78" />
    < set label="Week 8" value="3.32" />
    < set label="Week 9" value="8.57" />
    < set label="Week 10" value="16.95" />
< /chart>

配置散點圖和氣泡圖中的垂直零平面

零平面是當(dāng)圖表上顯示有負數(shù)據(jù)值時呈現(xiàn)在畫布X軸的0值上的線或面。你可以對散點圖和氣泡圖上的垂直零平面進行配置。帶有自定義垂直零平面的散點圖如下：

下表是渲染和自定義垂直零平面會用到的屬性：

屬性名稱	描述
showVZeroPlane	設(shè)置為1時顯示垂直零平面；設(shè)置為0時隱藏。
vZeroPlaneColor	如果指定了16進制的顏色代碼，那么垂直零平面將被渲染。
vZeroPlaneThickness	設(shè)置垂直零平面的厚度。
vZeroPlaneAlpha	設(shè)置垂直零平面的透明度，取值從0到100。

上圖所示在散點圖中自定義垂直零平面的數(shù)據(jù)結(jié)構(gòu)如下：

XML:

< chart caption="Old Stock Clearance" subcaption="Price Vs Profit" yaxisname="Price (In USD)" xaxisname="Profit (In %)" xaxismaxvalue="40" xaxisminvalue="-20" yaxismaxvalue="1000" xnumbersuffix="%" ynumberprefix="$" showvzeroplane="1" vzeroplanecolor="#cc3300" vzeroplanethickness="3" vzeroplanealpha="90" theme="fint">
    < dataset drawline="0" seriesname="Televisions" color="#6baa01" anchorsides="3" anchorradius="4" anchorbgcolor="#6baa01" anchorbordercolor="#6baa01">
        < set id="TV_1" x="-9.89" y="642" />
        < set id="TV_2" x="21.59" y="947" />
        < set id="TV_3" x="-8.8" y="433" />
        < set id="TV_4" x="-10.88" y="750" />
        < set id="TV_5" x="5.43" y="593" />
        < set id="TV_6" x="23.76" y="426" />
        < set id="TV_7" x="17.74" y="575" />
        < set id="TV_8" x="8.71" y="962" />
        < set id="TV_9" x="-1.56" y="205" />
        < set id="TV_10" x="16.42" y="937" />
        < set id="TV_11" x="10.42" y="689" />
        < set id="TV_12" x="-1.19" y="425" />
        < set id="TV_13" x="-12.58" y="804" />
        < set id="TV_14" x="25.49" y="700" />
        < set id="TV_15" x="24.27" y="302" />
        < set id="TV_16" x="19.07" y="276" />
        < set id="TV_17" x="16.16" y="913" />
        < set id="TV_18" x="4.37" y="744" />
        < set id="TV_19" x="-2.15" y="939" />
        < set id="TV_20" x="15.67" y="569" />
        < set id="TV_21" x="10.94" y="257" />
        < set id="TV_22" x="24.97" y="893" />
        < set id="TV_23" x="28.15" y="523" />
        < set id="TV_24" x="-1.76" y="930" />
        < set id="TV_25" x="11.53" y="564" />
        < set id="TV_26" x="-3.31" y="571" />
        < set id="TV_27" x="9.73" y="582" />
        < set id="TV_28" x="4.96" y="582" />
        < set id="TV_29" x="-7.77" y="756" />
        < set id="TV_30" x="-11.56" y="404" />
    < /dataset>
    < dataset seriesname="Cell Phones" color="#f8bd19" anchorsides="4" anchorradius="4" anchorbgcolor="#f8bd19" anchorbordercolor="#f8bd19">
        < set id="Mob_1" x="-2.79" y="681" />
        < set id="Mob_2" x="0.74" y="214" />
        < set id="Mob_3" x="16.82" y="215" />
        < set id="Mob_4" x="-13.31" y="530" />
        < set id="Mob_5" x="17.96" y="973" />
        < set id="Mob_6" x="12.92" y="217" />
        < set id="Mob_7" x="1.35" y="369" />
        < set id="Mob_8" x="28.21" y="304" />
        < set id="Mob_9" x="17.95" y="495" />
        < set id="Mob_10" x="26.99" y="795" />
        < set id="Mob_11" x="-7.85" y="315" />
        < set id="Mob_12" x="10.46" y="866" />
        < set id="Mob_13" x="20.09" y="671" />
        < set id="Mob_14" x="4.99" y="670" />
        < set id="Mob_15" x="3.88" y="479" />
        < set id="Mob_16" x="19.22" y="737" />
        < set id="Mob_17" x="29.81" y="928" />
        < set id="Mob_18" x="20.44" y="569" />
        < set id="Mob_19" x="22.67" y="885" />
        < set id="Mob_20" x="28.76" y="444" />
        < set id="Mob_21" x="22.98" y="288" />
        < set id="Mob_22" x="-7.61" y="817" />
        < set id="Mob_23" x="17.2" y="357" />
        < set id="Mob_24" x="-12.12" y="913" />
        < set id="Mob_25" x="-0.98" y="579" />
        < set id="Mob_26" x="-5.64" y="537" />
        < set id="Mob_27" x="23.62" y="522" />
        < set id="Mob_28" x="6.84" y="267" />
        < set id="Mob_29" x="-12.15" y="825" />
        < set id="Mob_30" x="-11.62" y="857" />
        < set id="Mob_31" x="9.58" y="204" />
        < set id="Mob_32" x="-11.57" y="232" />
        < set id="Mob_33" x="-14.13" y="450" />
        < set id="Mob_34" x="5.99" y="900" />
        < set id="Mob_35" x="9.24" y="228" />
    < /dataset>
</chart>

顯示或隱藏零平面值

FusionCharts圖表中，當(dāng)Y軸有零平面后，允許你顯示或隱藏數(shù)據(jù)值0。隱藏0值的2D柱狀圖如下：

下表是隱藏或顯示零平面所需的屬性：

屬性名稱	描述
showZeroPlaneValue	設(shè)置為1時顯示零平面值；設(shè)置為0時隱藏。

上圖所示圖表隱藏0數(shù)據(jù)值的數(shù)據(jù)結(jié)構(gòu)如下：

JSON:

{
    "chart": {
        "caption": "Website Visitors Growth",
        "subcaption": "Last 10 weeks",
        "xAxisName": "Week",
        "yAxisName": "Growth",
        "numberSuffix": "%",
        "theme": "fint",
        "showValues": "0",
        "showZeroPlane": "1",
        "zeroPlaneColor": "#003366",
        "zeroPlaneAlpha": "100",
        "zeroPlaneThickness": "3",
        "divLineDashed": "0",
        "divLineAlpha": "40",
        "showZeroPlaneValue": "0"
    },
    "data": [
        {
            "label": "Week 1",
            "value": "14.5"
        },
        {
            "label": "Week 2",
            "value": "-6.5"
        },
        {
            "label": "Week 3",
            "value": "9.8"
        },
        {
            "label": "Week 4",
            "value": "9.2"
        },
        {
            "label": "Week 5",
            "value": "-7.45"
        },
        {
            "label": "Week 6",
            "value": "-3.19"
        },
        {
            "label": "Week 7",
            "value": "-11.78"
        },
        {
            "label": "Week 8",
            "value": "3.32"
        },
        {
            "label": "Week 9",
            "value": "8.57"
        },
        {
            "label": "Week 10",
            "value": "16.95"
        }
    ]
}

XML:

< chart caption="Website Visitors Growth" subcaption="Last 10 weeks" xaxisname="Week" yaxisname="Growth" numbersuffix="%" theme="fint" showvalues="0" showzeroplane="1" zeroplanecolor="#003366" zeroplanealpha="100" zeroplanethickness="3" divlinedashed="0" divlinealpha="40" showzeroplanevalue="0">
    < set label="Week 1" value="14.5" />
    < set label="Week 2" value="-6.5" />
    < set label="Week 3" value="9.8" />
    < set label="Week 4" value="9.2" />
    < set label="Week 5" value="-7.45" />
    < set label="Week 6" value="-3.19" />
    < set label="Week 7" value="-11.78" />
    < set label="Week 8" value="3.32" />
    < set label="Week 9" value="8.57" />
    < set label="Week 10" value="16.95" />
< /chart>

在雙Y軸圖表中showPZeroPlaneValue屬性用于顯示或隱藏圖表的第一的Y軸，showSZeroPlaneValue屬性用于顯示或隱藏圖表的第二個Y軸。

顯示或隱藏零平面

零平面可以在折線圖、散點圖和氣泡圖中移除，但不能在柱狀圖和面積圖中移除，因為它們用它作為基線來繪制圖表。隱藏垂直零平面的散點圖如下：

下表是隱藏或顯示零平面所需的屬性：

屬性名稱	描述
showZeroPlane	設(shè)置為1時顯示水平零平面；設(shè)置為0是隱藏。
showVZeroPlane	設(shè)置為1時顯示垂直零平面；設(shè)置為0時隱藏。

上圖所示圖表，在散點圖中顯示或隱藏零平面的數(shù)據(jù)結(jié)構(gòu)如下：

XML:

< chart caption="Old Stock Clearance" subcaption="Price Vs Profit" yaxisname="Price (In USD)" xaxisname="Profit (In %)" xaxismaxvalue="40" xaxisminvalue="-20" yaxismaxvalue="1000" xnumbersuffix="%" ynumberprefix="$" showvzeroplane="0" vzeroplanecolor="#cc3300" vzeroplanethickness="3" vzeroplanealpha="90" theme="fint">
    < dataset drawline="0" seriesname="Televisions" color="#6baa01" anchorsides="3" anchorradius="4" anchorbgcolor="#6baa01" anchorbordercolor="#6baa01">
        < set id="TV_1" x="-9.89" y="642" />
        < set id="TV_2" x="21.59" y="947" />
        < set id="TV_3" x="-8.8" y="433" />
        < set id="TV_4" x="-10.88" y="750" />
        < set id="TV_5" x="5.43" y="593" />
        < set id="TV_6" x="23.76" y="426" />
        < set id="TV_7" x="17.74" y="575" />
        < set id="TV_8" x="8.71" y="962" />
        < set id="TV_9" x="-1.56" y="205" />
        < set id="TV_10" x="16.42" y="937" />
        < set id="TV_11" x="10.42" y="689" />
        < set id="TV_12" x="-1.19" y="425" />
        < set id="TV_13" x="-12.58" y="804" />
        < set id="TV_14" x="25.49" y="700" />
        < set id="TV_15" x="24.27" y="302" />
        < set id="TV_16" x="19.07" y="276" />
        < set id="TV_17" x="16.16" y="913" />
        < set id="TV_18" x="4.37" y="744" />
        < set id="TV_19" x="-2.15" y="939" />
        < set id="TV_20" x="15.67" y="569" />
        < set id="TV_21" x="10.94" y="257" />
        < set id="TV_22" x="24.97" y="893" />
        < set id="TV_23" x="28.15" y="523" />
        < set id="TV_24" x="-1.76" y="930" />
        < set id="TV_25" x="11.53" y="564" />
        < set id="TV_26" x="-3.31" y="571" />
        < set id="TV_27" x="9.73" y="582" />
        < set id="TV_28" x="4.96" y="582" />
        < set id="TV_29" x="-7.77" y="756" />
        < set id="TV_30" x="-11.56" y="404" />
    < /dataset>
    < dataset seriesname="Cell Phones" color="#f8bd19" anchorsides="4" anchorradius="4" anchorbgcolor="#f8bd19" anchorbordercolor="#f8bd19">
        < set id="Mob_1" x="-2.79" y="681" />
        < set id="Mob_2" x="0.74" y="214" />
        < set id="Mob_3" x="16.82" y="215" />
        < set id="Mob_4" x="-13.31" y="530" />
        < set id="Mob_5" x="17.96" y="973" />
        < set id="Mob_6" x="12.92" y="217" />
        < set id="Mob_7" x="1.35" y="369" />
        < set id="Mob_8" x="28.21" y="304" />
        < set id="Mob_9" x="17.95" y="495" />
        < set id="Mob_10" x="26.99" y="795" />
        < set id="Mob_11" x="-7.85" y="315" />
        < set id="Mob_12" x="10.46" y="866" />
        < set id="Mob_13" x="20.09" y="671" />
        < set id="Mob_14" x="4.99" y="670" />
        < set id="Mob_15" x="3.88" y="479" />
        < set id="Mob_16" x="19.22" y="737" />
        < set id="Mob_17" x="29.81" y="928" />
        < set id="Mob_18" x="20.44" y="569" />
        < set id="Mob_19" x="22.67" y="885" />
        < set id="Mob_20" x="28.76" y="444" />
        < set id="Mob_21" x="22.98" y="288" />
        < set id="Mob_22" x="-7.61" y="817" />
        < set id="Mob_23" x="17.2" y="357" />
        < set id="Mob_24" x="-12.12" y="913" />
        < set id="Mob_25" x="-0.98" y="579" />
        < set id="Mob_26" x="-5.64" y="537" />
        < set id="Mob_27" x="23.62" y="522" />
        < set id="Mob_28" x="6.84" y="267" />
        < set id="Mob_29" x="-12.15" y="825" />
        < set id="Mob_30" x="-11.62" y="857" />
        < set id="Mob_31" x="9.58" y="204" />
        < set id="Mob_32" x="-11.57" y="232" />
        < set id="Mob_33" x="-14.13" y="450" />
        < set id="Mob_34" x="5.99" y="900" />
        < set id="Mob_35" x="9.24" y="228" />
    < /dataset>
</chart>

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

迎春納福，金猴獻瑞，革新之年雙節(jié)同慶，惠享不停驚喜連連！優(yōu)惠詳情點擊查看>>

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

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

上一篇：Visual Paradigm使用技巧：將圖形收藏為書簽下一篇：C1DataGrid for WPF基礎(chǔ)教程：創(chuàng)建可移動的線