彩票走势图

FusionCharts使用教程：自定义图表——零平面

原创|使用教程|编辑：郑恭琳|2016-01-12 12:09:30.000|阅读 1030 次

概述：零平面是分离图表y轴正数和负数的平面，当图表包含正数值和负数值时是默认被渲染。零平面出现在柱状图、折线图、散点图、气泡图以及面积图中。此外，散点图和气泡图表也支持X轴上的垂直零平面。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接：

FusionCharts目前已更新至v3.10.0版本>>点击了解FusionCharts v3.10.0更新详情

< FusionChart最新版本下载>

在2D、3D图表中自定义零平面

2D图表中的零平面

带有自定义零平面的2D柱状图如下：

fusionchart

下表是自定义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柱状图如下：

fusionchart

下表是自定义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值上的线或面。你可以对散点图和气泡图上的垂直零平面进行配置。带有自定义垂直零平面的散点图如下：

fusionchart

下表是渲染和自定义垂直零平面会用到的属性：

属性名称 描述
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柱状图如下：

fusionchart

下表是隐藏或显示零平面所需的属性：

属性名称 描述
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轴。

显示或隐藏零平面

零平面可以在折线图、散点图和气泡图中移除，但不能在柱状图和面积图中移除，因为它们用它作为基线来绘制图表。隐藏垂直零平面的散点图如下：

fusionchart

下表是隐藏或显示零平面所需的属性：

属性名称 描述
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@pclwef.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP