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

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

《FusionCharts图表控件中文版使用手册.docx》由会员分享，可在线阅读，更多相关《FusionCharts图表控件中文版使用手册.docx（24页珍藏版）》请在冰豆网上搜索。

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

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

根据网上资料编辑以及个人经验并汇总

前言3

先谈谈我对fusionCharts的看法：

3

一、构成fusionCharts的三要素：

swf、data.xml、承载图表的载体3

二、对于我们还未使用的功能：

图表转换成图片或者pdf导出、热点链接3

三、重点4

fusionCharts的基本知识部分：

4

一、SWF动画文件4

二、XML数据文件4

三、HTML（当然也可以使用JSP）嵌入charts文件5

四、结合javascript的应用：

5

五、热点链接：

link=’’5

六、图表数据导出6

七、图表导出为pdf或者图片（JPEG和PNG）形式6

八、中文编码解决方法：

7

附注fusionCharts详细属性：

7

1、边框及整个背景的属性：

8

2、图表背景属性：

8

3、外部引入LOGO:

9

4、图表名称和轴属性：

9

5、dataplot属性9

6、数据横纵轴属性10

7、图表上的数据显示10

8、图表调色板10

9、横轴坐标最大值、最小值属性10

10、图表内部的div线相关属性11

11、图表内部垂直div线的相关属性11

12、Zeroplan相关属性11

13、Anchors相关属性（针对线图）11

14、tool-tip属性11

15、padding属性12

16、数据格式相关属性12

17、legend相关属性12

18、3D图表属性13

19、自定义菜单属性13

20、趋势线：

13

21、Styles属性：

（eg）定义自定义效果属性，然后在一个对象上进行使用。

14

按照编程xml构造结构分：

（只列举出了几种主要属性，主要用于xmlBuiler）16

前言

Ø先谈谈我对fusionCharts的看法：

一、构成fusionCharts的三要素：

swf、data.xml、承载图表的载体

1、Swf：

按照你所设计的图表类型加载相应的.swf文件到你的工程即可（eg：

若你想生成一张二维柱状图，那么在你的工程里就必须包含Column2D.swf文件）

2、Data.xml：

方法一：

直接用data.jsp文件替代data.xml文件，写法格式同xml。

图表所需的属性直接在里面写死就行，只是所需的横纵坐标的数据调用后台的方法从数据库里面取得。

这样就可以省去xmlBuilder这部分代码。

方法二：

从后台取数据，然后调用相应的xmlBuiler方法生成所需的xml。

项目中已有一些XmlBuilder的方法可供调用。

3、承载图表的载体：

HTML、JSP等都可以。

调用fusionCharts开发方提供的fusioncharts.js里面写的fusionchart方法设置相关的参数直接生产相应的图表，产生一个fusioncharts图表的div节点。

但是现在fusionCharts图表还不能直接嵌入到ext框架里面。

只能通过iframe嵌入。

这样每次刷新的时候都会从新载入。

二、对于我们还未使用的功能：

图表转换成图片或者pdf导出、热点链接

1、图表转换成图片或者PDF导出：

fusionCharts开发方提供了两种方法实现，一种的客户端导出，一种是服务器端导出。

建议使用客户端导出，使用开发方提供的服务器端导出的jar包时在IE上会抛出异常，在火狐上图表一般能显示，但在控制器也会抛出异常。

开发方写的方法，有一些内部机制，没有完全理解。

用服务器端的方法，可以正常使用。

2、热点链接：

主要应该是数据传递问题。

一方面可以直接从data.xml文件里面的link属性设置你要传过来的参数，然后在你要连接的页面用get方法去获取。

另一方面可以直接调用后台的方法把xml文件里面的数据以js的形式直接导入到你要连接的页面。

三、重点

1、FusionCharts的三要素

2、xml各属性的应用

ØfusionCharts的基本知识部分：

一、SWF动画文件

1.SWF文件在目录FusionCharts_Site\Charts下

2.包括：

1）单一系列图表（9种）：

（数据格式结构可共用，即单一系列的任何一种图表都可以用其他单一系列的图表代替）二维柱状图、三维柱状图、二维饼图、三维饼图、二维线图、二维条形图、二维块图、二维圆环图、三维圆环图。

2）多序列图（6种）：

（主要用于比较，数据格式结构可共用）二维多序列柱状图、三维多序列柱状图、二维多序列线图、二维多序列块图、二维多序列条形图、三维多序列条形图。

3）堆栈图（6种）：

二维堆栈柱状图、三维堆栈柱状图、二维堆栈块图、二维堆栈条形图、三维堆栈条形图、二维堆栈多序列柱状图（除最后一个图，其他的图数据可共享）

4）联合系列（7种）：

（单一系列的图形可以联合使用，在一张图表中显示）

5）点分布图（2种）：

（主要用来描述事件发生的分布情况，数据格式结构可共用）点状图、气泡状图。

6）带滚动条系列（6种）：

多序列图（包括二维柱状图、二维线图、二维块图）、二维堆状柱状图、二维联合图、二维联合双Y轴图。

7）Grid形式（1种）：

SSGrid.swf用法同上，可以结合上面的图形，一起使用。

注意：

grid的形式只支持单一系列图表的数据。

二、XML数据文件

1.XML文件以开头，以结束；或者以开头，以结束

2.属性：

（详细见附注）XML标签属性有以下四种数据类型：

布尔型、数字型、字符型、十六进制颜色代码（只支持十六进制的颜色表示，且去掉前面的#号）

3.注意点：

1）当数字前缀numberPrefix为€、£、₣、¥、¢、%使用dataURL时可直接使用，但是当使用dataXML时需进行相应的编码即%E2%82%AC、%A3、%E2%82%A3、%A5、%A2、%25。

2）当标题caption含有&在dataXML中要被编码为%26。

3）Fusioncharts不支持<、>号，需编码成<、>

4）当需要显示“’”时（eg:

John’s）使用dataURL时需被编译成'使用dataXML时需被编译成%26apos;

5）当数据不连续时可以使用connectNullData属性设置是否让其连续显示（不连续点的直接用直线相连，也可以再不连续点的前一属性中设置dashed='1'可以用虚线链接不连续点）

三、HTML（当然也可以使用JSP）嵌入charts文件

1、不使用JS情况：

（不推荐使用）

使用