彩票走势图

FusionCharts使用教程:自定义图表——数据图透明度和边框效果

原创|使用教程|编辑:郑恭琳|2015-12-21 14:42:36.000|阅读 2345 次

概述:本篇教程主要教大家如何给FusionCharts图表中数据图添加自定义透明度和边框效果。

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

相关链接:

< FusionChart最新版本下载>

自定义数据图透明度

Fusioncharts允许你设置数据图填充颜色的透明度。效果如下图所示:

fusionchart

下表是自定义数据图透明度所需的属性:

属性名称 描述
plotFillAlpha 用于设置整个图表对象中所有数据图的透明度。
alpha 用于设置单个数据列的透明度。

上图所示的数据图自定义透明度数据结构如下:

JSON:

{
    "chart": {
        "caption": "Comparison of Quarterly Revenue",
        "subCaption": "Harry's SuperMart",
        "xAxisname": "Quarter",
        "yAxisName": "Revenues (In USD)",
        "numberPrefix": "$",
        "plotFillAlpha": "90",
        "theme": "fint"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Q1"
                },
                {
                    "label": "Q2"
                },
                {
                    "label": "Q3"
                },
                {
                    "label": "Q4"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Previous Year",
            "alpha": "30",
            "data": [
                {
                    "value": "10000"
                },
                {
                    "value": "11500"
                },
                {
                    "value": "12500"
                },
                {
                    "value": "15000"
                }
            ]
        },
        {
            "seriesname": "Current Year",
            "data": [
                {
                    "value": "25400"
                },
                {
                    "value": "29800"
                },
                {
                    "value": "21800"
                },
                {
                    "value": "26800"
                }
            ]
        }
    ]
}

XML:

<chart caption="Comparison of Quarterly Revenue" subcaption="Harry&#39;s SuperMart" xaxisname="Quarter" yaxisname="Revenues (In USD)" numberprefix="$" plotfillalpha="90" theme="fint">
    <categories>
        < category label="Q1" />
        < category label="Q2" />
        < category label="Q3" />
        < category label="Q4" />
    </categories>
    <dataset seriesname="Previous Year" alpha="30">
        < set value="10000" />
        < set value="11500" />
        < set value="12500" />
        < set value="15000" />
    </dataset>
    <dataset seriesname="Current Year">
        < set value="25400" />
        < set value="29800" />
        < set value="21800" />
        < set value="26800" />
    </dataset>
</chart>

自定义数据图边框

显示或隐藏数据图边框

默认情况下每一个数据图(柱状图、面积图、饼图)都有边框。你可以选择显示也可以隐藏边框。

fusionchart

自定义数据图边框所需属性:

属性名称 描述
showPlotBorder 设置为1(默认)时显示边框,为0时隐藏边框。

上图所示图表的自定义边框数据结构如下:

JSON:

{
    "chart": {
        "caption": "Quarterly Revenue",
        "subCaption": "Last year",
        "xAxisName": "Quarter",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "theme": "fint",
        "showPlotBorder": "1"
    },
    "data": [
        {
            "label": "Q1",
            "value": "1950000"
        },
        {
            "label": "Q2",
            "value": "1450000"
        },
        {
            "label": "Q3",
            "value": "1730000"
        },
        {
            "label": "Q4",
            "value": "2120000"
        }
    ]
}

XML:

<chart caption="Quarterly Revenue" subcaption="Last year" xaxisname="Quarter" yaxisname="Amount (In USD)" numberprefix="$" theme="fint" showplotborder="1">
    < set label="Q1" value="1950000" />
    < set label="Q2" value="1450000" />
    < set label="Q3" value="1730000" />
    < set label="Q4" value="2120000" />
</chart>

使用虚线边框

fusionchart

自定义虚线边框所需属性如下表:

属性名称 描述
plotBorderDashed 设置整个图表对象的虚线边框。为1时设置为虚线边框,为0(默认)时移除边框。
plotBorderDashLen 设置整个图表对象虚线边框的短线长度。
plotBorderDashGap 设置整个图表对象虚线边框的短线间间距。
dashed 设置单个数据列的虚线边框效果。
dashlen 设置单个数据列虚线边框的短线长度。
dashgap 设置单个数据列虚线边框的短线间间距。

上图所示图标的数据结构如下:

JSON:

{
    "chart": {
        "caption": "Quarterly Revenue",
        "subCaption": "Last year",
        "xAxisName": "Quarter",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "theme": "fint",
        "showPlotBorder": "1",
        "plotBorderDashed": "1",
        "plotBorderDashLen": "4",
        "plotBorderDashGap": "4",
        "plotBorderThickness": "1",
        "plotBorderColor": "#000000"
    },
    "data": [
        {
            "label": "Q1",
            "value": "1950000"
        },
        {
            "label": "Q2",
            "value": "1450000"
        },
        {
            "label": "Q3",
            "value": "1730000"
        },
        {
            "label": "Q4",
            "value": "2120000"
        }
    ]
}

XML:

<chart caption="Quarterly Revenue" subcaption="Last year" xaxisname="Quarter" yaxisname="Amount (In USD)" numberprefix="$" theme="fint" showplotborder="1" plotborderdashed="1" plotborderdashlen="4" plotborderdashgap="4" plotborderthickness="1" plotbordercolor="#000000">
    < set label="Q1" value="1950000" />
    < set label="Q2" value="1450000" />
    < set label="Q3" value="1730000" />
    < set label="Q4" value="2120000" />
</chart>

使用圆边

你可以在2D柱状图或条形图中将数据图的边框设置为圆边效果,如下图所示:

fusionchart

所需属性:

属性名称 描述
useRoundEdges 设置为1时显示圆边(玻璃渐变)效果。

上图所示图表数据结构如下:

JSON:

{
    "chart": {
        "caption": "Quarterly Revenue",
        "subCaption": "Last year",
        "xAxisName": "Quarter",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "theme": "fint",
        "useRoundEdges": "1"
    },
    "data": [
        {
            "label": "Q1",
            "value": "1950000"
        },
        {
            "label": "Q2",
            "value": "1450000"
        },
        {
            "label": "Q3",
            "value": "1730000"
        },
        {
            "label": "Q4",
            "value": "2120000"
        }
    ]
}

XML:

<chart caption="Quarterly Revenue" subcaption="Last year" xaxisname="Quarter" yaxisname="Amount (In USD)" numberprefix="$" theme="fint" useroundedges="1">
    < set label="Q1" value="1950000" />
    < set label="Q2" value="1450000" />
    < set label="Q3" value="1730000" />
    < set label="Q4" value="2120000" />
</chart>

购买最新正版授权!详情请""

2015岁末扫尾之战!全球厂商携手放利!优惠详情点击查看>>


标签:JavaScript HTML5图表图表库图表解决方案图表控件FusionCharts图表

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn


为你推荐

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


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP