FusionCharts目前已更新至v3.10.0版本>>點擊了解FusionCharts v3.10.0更新詳情
< FusionChart最新版本下載>
在2D、3D圖表中自定義零平面
2D圖表中的零平面
帶有自定義零平面的2D柱狀圖如下：
下表是自定義2D圖表的零平面所需屬性：
| 屬性名稱 |
描述 |
| zeroPlaneColor |
如果指定了16進制的顏色代碼，那么零平面將被渲染。 |
| zeroPlaneThickness |
設置零平面的厚度。 |
| zeroPlaneAlpha |
設置零平面的透明度，取值從0到100。 |
上圖所示的帶有零平面的2D圖表數據結構如下：
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 |
設置零平面的透明度，取值從0到100。 |
| zeroPlaneShowBorder |
設置為1顯示零平面的邊框；設置為0隱藏零平面的邊框。 |
| zeroPlaneBorderColor |
如果指定了16進制的顏色代碼，那么零平面的邊框將被渲染。 |
上圖所示的帶有零平面的3D圖表數據結構如下：
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>
配置散點圖和氣泡圖中的垂直零平面
零平面是當圖表上顯示有負數據值時呈現在畫布X軸的0值上的線或面。你可以對散點圖和氣泡圖上的垂直零平面進行配置。帶有自定義垂直零平面的散點圖如下：
下表是渲染和自定義垂直零平面會用到的屬性：
| 屬性名稱 |
描述 |
| showVZeroPlane |
設置為1時顯示垂直零平面；設置為0時隱藏。 |
| vZeroPlaneColor |
如果指定了16進制的顏色代碼，那么垂直零平面將被渲染。 |
| vZeroPlaneThickness |
設置垂直零平面的厚度。 |
| vZeroPlaneAlpha |
設置垂直零平面的透明度，取值從0到100。 |
上圖所示在散點圖中自定義垂直零平面的數據結構如下：
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圖表中，當Y軸有零平面后，允許你顯示或隱藏數據值0。隱藏0值的2D柱狀圖如下：
下表是隱藏或顯示零平面所需的屬性：
| 屬性名稱 |
描述 |
| showZeroPlaneValue |
設置為1時顯示零平面值；設置為0時隱藏。 |
上圖所示圖表隱藏0數據值的數據結構如下：
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 |
設置為1時顯示水平零平面；設置為0是隱藏。 |
| showVZeroPlane |
設置為1時顯示垂直零平面；設置為0時隱藏。 |
上圖所示圖表，在散點圖中顯示或隱藏零平面的數據結構如下：
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>
購買最新正版授權！詳情請""
迎春納福，金猴獻瑞，革新之年雙節同慶，惠享不停驚喜連連！優惠詳情點擊查看>>
標簽：
JavaScript HTML5圖表圖表庫數據可視化圖表解決方案圖表控件FusionCharts圖表
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
半島外圍網上直營 
21次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線