`
huang_xiaok
  • 浏览: 95931 次
  • 性别: Icon_minigender_1
  • 来自: 成都
博客专栏
90a30fc4-e2b0-37bf-a450-86cdba0caacc
Fusioncharts中...
浏览量：17112
文章分类
社区版块
存档分类

FusionCharts中文教程：自定义图表——画布

fusionchart图表图表控件图表工具数据可视化JavaScript 
阅读更多

FusionCharts图表的画布是指在图表数据绘制的区域但不包括标题，图例和轴名称被渲染的区域。
如下图所示的蓝色区域就是图表的画布区域：

fusionchart canvas

本篇教程将从四个方面教你自定义图表的画布：

1.修改画布的填充颜色

图表的画布颜色填充修饰效果如下图所示：

fusionchart canvas

修改画布填充颜色用到的属性有：

属性名称 描述
canvasBgColor 设置画布的背景颜色。
canvasBgAlpha 设置画布背景的透明度。

数据结构如下：

JSON:

{
    "chart": {
        "caption": "Monthly Revenue",
        "subCaption": "Last year",
        "xAxisName": "Month",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "placevaluesInside": "1",
        "rotatevalues": "1",
        "valueFontColor": "#ffffff",
        "canvasbgColor": "#1790e1",
        "canvasbgAlpha": "10",
        "canvasBorderThickness": "1",
        "showAlternateHGridColor": "0",
        "bgColor": "#eeeeee",
        "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="$" placevaluesinside="1" rotatevalues="1" valuefontcolor="#ffffff" canvasbgcolor="#1790e1" canvasbgalpha="10" canvasborderthickness="1" showalternatehgridcolor="0" bgcolor="#eeeeee" 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>

2.自定义画布边框

默认情况下，2D图表的渲染带有画布边框。FusionChsrts允许你自定义画布边框的颜色、厚度以及透明度。带有画布边框修饰的图表如下图所示：

fusionchart canvas

下表是用于自定义图表画布边框所需的属性：

属性名称 描述
showCanvasBorder 设置为1时显示画布边框；设置为0时隐藏画布边框。
canvasBorderColor 用于指定画布边框的颜色。
canvasBorderThickness 用于指定画布边框的厚度。
canvasBorderAlpha 用于指定画布边框的透明度。

数据结构如下：

JSON:

{
    "chart": {
        "caption": "Monthly Revenue",
        "subCaption": "Last year",
        "xAxisName": "Month",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "showCanvasBorder": "1",
        "canvasBorderColor": "#666666",
        "canvasBorderThickness": "4",
        "canvasBorderAlpha": "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="$" showcanvasborder="1" canvasbordercolor="#666666" canvasborderthickness="4" canvasborderalpha="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>

3.使用渐变填充画布

下图是带有渐变填充效果的图表画布：

fusionchart canvas

下表是用于自定义图表画布渐变填充所需的属性：

属性名称 描述
canvasBgColor 设置画布的背景颜色。
canvasBgAlpha 设置画布背景的透明度。
canvasBgRatio 用于指定画布背景在各个渐变的比例并以逗号分隔。
canvasBgAngle 用于指定画布背景渐变的角度。

数据结构如下：

JSON:

{
    "chart": {
        "caption": "Monthly Revenue",
        "subCaption": "Last year",
        "theme": "fint",
        "xAxisName": "Month",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "placevaluesInside": "1",
        "rotatevalues": "1",
        "bgColor": "#eeeeee,#cccccc",
        "canvasbgColor": "#eeeeee,#b3b3b3",
        "canvasbgAlpha": "100",
        "canvasBgRatio": "40,60",
        "canvasBgAngle": "0"
    },
    "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" theme="fint" xaxisname="Month" yaxisname="Amount (In USD)" numberprefix="$" placevaluesinside="1" rotatevalues="1" bgcolor="#eeeeee,#cccccc" canvasbgcolor="#eeeeee,#b3b3b3" canvasbgalpha="100" canvasbgratio="40,60" canvasbgangle="0">
    < 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>

4.配置3D画布

在FusionCharts图表中的画布可以配置成3D效果，如下图所示。

fusionchart canvas

自定义3D画布所需的属性如下表所示：

属性名称 描述
canvasBaseColor 用于指定画布的基座颜色。
showCanvasBg 设置为1（默认）时显示画布背景；设置为0时隐藏画布背景。
showCanvasBase 设置为1（默认）时显示画布基座；设置为0时隐藏画布基座。
canvasBaseDepth 用于设置画布基座的高度。
canvasBgDepth 用于指定画布背景的深度。

数据结构如下：

JSON:

{
    "chart": {
        "caption": "Monthly Revenue",
        "subCaption": "Last year",
        "xAxisName": "Month",
        "yAxisName": "Amount (In USD)",
        "theme": "fint",
        "numberPrefix": "$",
        "placevaluesInside": "1",
        "rotatevalues": "1",
        "showCanvasBg": "1",
        "showCanvasBase": "1",
        "canvasBaseDepth": "14",
        "canvasBgDepth": "5",
        "canvasBaseColor": "#aaaaaa",
        "canvasBgColor": "#eeeeee"
    },
    "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)" theme="fint" numberprefix="$" placevaluesinside="1" rotatevalues="1" showcanvasbg="1" showcanvasbase="1" canvasbasedepth="14" canvasbgdepth="5" canvasbasecolor="#aaaaaa" canvasbgcolor="#eeeeee">
    < 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>

 

< 立即下载体验FusionCharts>

 

1
顶
1
踩
分享到：
| FusionCharts中文教程：自定义图表——边框 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    FusionCharts参数及功能特性详解实例

    FusionCharts 参数及功能特性详解实例 FusionCharts 是一款功能强大且灵活的图表工具，可以帮助开发者快速...FusionCharts 提供了丰富的参数和功能特性，开发者可以根据需要进行设置和调整，以实现图表的高度自定义。

    fusionCharts是如何在网页呈现图表

    FusionCharts是一款强大的图表库，它能够帮助开发者在网页中创建出丰富多样的交互式图表。这个库通过结合Flash技术和JavaScript来实现图表的渲染和功能交互。以下将详细阐述FusionCharts在网页呈现图表的过程： 1. ...

    利用FusionCharts 实现数据图表展示

    - **自定义样式**：FusionCharts允许自定义图表的颜色、字体、边框等样式，以适应品牌风格或提升视觉效果。 - **数据格式化**：原始数据可能需要预处理，如计算百分比、格式化日期等，以便适配FusionCharts的JSON...

    FusionCharts——基于flash的图表

    FusionCharts是一个Flash的图表组件，它可以用来制作数据动画图表，其中动画效果用的是Adobe Flash 8 （原Macromedia Flash的）制作的flash ， FusionCharts可用于任何网页的脚本语言类似于HTML ， .NET，ASP ， JSP...

    FusionCharts图表控件中文版使用手册.doc

    《FusionCharts图表控件中文版使用手册》是针对初学者设计的一份详细教程，旨在帮助用户快速掌握这款强大的图表工具。FusionCharts是一款流行的JavaScript图表库，它能够以丰富的互动性和美观的视觉效果呈现数据。 ...

    FusionCharts 非常绚的flash图表

    **FusionCharts：打造绚丽的Flash图表** FusionCharts是一款高度评价的Flash图表库，它以其生动、炫目的视觉效果而备受赞誉。这款工具能够帮助开发者轻松创建出各种复杂的统计图表，适用于各种业务分析和数据可视化...

    Fusioncharts导出图片所需jar包

    在IT行业中，FusionCharts是一款广泛使用的交互式图表库，它能够帮助开发者创建美观且功能丰富的数据可视化应用。本文将详细讲解如何利用FusionCharts提供的`fcexporter.jar`和`fcexporthandler.jar`这两个关键的...

    FusionCharts图表控件中文版使用手册

    总的来说，FusionCharts中文版使用手册是一份详尽的参考资料，涵盖了从基础到高级的各种特性，无论你是初学者还是经验丰富的开发者，都能从中找到你需要的信息，以创建出专业且美观的图表。通过熟练掌握手册中的知识...

    FusionCharts在用JSP自定义导出pdf[参照].pdf

    本文将详细介绍如何在JSP环境下自定义导出FusionCharts图表。 首先，为了实现服务器端导出，我们需要将FusionCharts的`exportAtClient`属性设置为0，这意味着导出操作将在服务器端执行，而不是在客户端。这可以通过...

    FusionCharts教程

    除了基础功能，FusionCharts还支持图表融合、地图图表、3D效果、自定义工具提示、动画效果等高级特性。例如，通过图表融合在同一图表区域展示多个数据系列： ```javascript chart.setChartParams({ ... ...

    Fusioncharts31教程整理.pdf

    除了基本的图表展示，FusionCharts还具有丰富的高级特性，如工具提示、图例交互、动画效果、自定义事件处理等，增强用户体验。 7. 设置chart样式的属性： FusionCharts提供了大量可配置的属性，允许用户调整图表...

    FusionCharts图表控件中文版使用手册定义.pdf

    《FusionCharts图表控件中文版使用手册定义》是一份详细介绍如何使用FusionCharts图表控件的网络文档。FusionCharts是一款强大的图表生成工具，它能够帮助开发者创建丰富的交互式图表，广泛应用于数据分析和可视化...

    fusioncharts中文教程

    这个中文教程是为那些想要学习如何使用FusionCharts来创建动态、交互式图表的人准备的。以下是对FusionCharts及其相关知识点的详细说明： 1. **FusionCharts介绍**： FusionCharts是一款基于JavaScript和Flash的...

    FusionCharts参数大全+中文说明

    FusionCharts是一款功能强大的JavaScript图表库，用于在Web应用中创建交互式和动态的图表。其丰富的参数配置选项使得开发者能够根据需求定制图表的外观与行为，从而实现高度个性化的数据可视化效果。以下是对...

    fusioncharts-dist:FusionCharts JavaScript图表库。 超过95种以上的图表和1,400种以上的地图可供选择，并且集成了所有流行JavaScript框架和后端编程语言

    FusionCharts是一个JavaScript图表库，可为您的Web和移动应用程序提供100多个图表和2,000多个地图。 所有的可视化都是交互的和动画的，它们以SVG和VML（对于IE 6/7/8）呈现。 此软件包还包含FusionTime（时间序列图...

    用fusioncharts使用json格式数据展示图表

    FusionCharts是一款强大的JavaScript图表库，能够将JSON格式的数据转换为交互式的图表，从而提升数据分析和展示的效果。本文将深入探讨如何利用FusionCharts结合JSON数据来创建图表。 **FusionCharts简介** ...

    fusioncharts

    FusionCharts 是一款强大的数据可视化工具，专为网页和应用程序设计，用于创建交互式图表和图形。它提供了一系列丰富的图表类型，如柱状图、线图、饼图、地图等，使数据呈现更加生动、易理解。FusionCharts XT (v...

    Fusioncharts XT V3.2.2最新中文版教程

    ### Fusioncharts XT V3.2.2 最新中文版教程 #### 一、Fusioncharts V3.2.2 产品简介 Fusioncharts V3.2.2 是一款先进的图表制作工具，专为现代网站和企业应用程序设计，旨在帮助用户创建交互性强、视觉效果出众的...

Magicbox
Global site tag (gtag.js) - Google Analytics