FusionCharts使用手册1编程频道|福州电脑网

2023年11月27日发(作者：)

FusionCharts v3使用手册

-------图表展现

2011/7/18

FusionCharts v3使用手册

一、 FUSIONCHARTS构成的基本三要素：SWF，DATA，承载图表的载体。 ......................................4

二、装载SWF的注意事项 ...................................................................................................................................4

1.装载的基本语法 ................................................................................................................................4

2.基本数据格式 .............................................................................................................................................4

SWF

三、 CHARTS文件中的SWF文件及运行结果图...........................................................................................6

四、结合JAVASCRIPT的应用 ........................................................................................................................... 22

1.前提： ....................................................................................................................................................... 22

2.事件： ....................................................................................................................................................... 23

3.方法............................................................................................................................................................ 23

五、热点链接：LINK=’’ ...................................................................................................................................... 23

六、图表数据导出 ............................................................................................................................................... 24

七、表导出为PDF或者图片（JPEG和PNG）形式 ................................................................................... 25

1、服务器端图表导出.................................................................................................................................... 25

2、客户端图表导出 ........................................................................................................................................ 25

3、批图表导出处理：.................................................................................................................................... 26

附注FUSIONCHARTS详细属性： .................................................................................................................... 26

按照模块分类： ............................................................................................................................................... 26

1.................................................................................................................. 26

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

2.................................................................................................................................... 27

、图表背景属性：

3LOGO: .................................................................................................................................... 27

、外部引入

4........................................................................................................................... 27

、图表名称和轴属性：

5data plot ........................................................................................................................................ 28

、属性

6.................................................................................................................................... 28

、数据横纵轴属性

7 ............................................................................................................................... 29

、图表上的数据显示

8 ............................................................................................................................................ 29

、图表调色板

9......................................................................................................... 29

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

10div ............................................................................................................ 29

、图表内部的线相关属性

11div.................................................................................................... 29

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

12Zero plan............................................................................................................................. 30

、相关属性

13Anchors .................................................................................................... 30

、相关属性（针对线图）

14tool-tip ........................................................................................................................................ 30

、属性

15padding........................................................................................................................................ 30

、属性

16............................................................................................................................. 31

、数据格式相关属性

17legend ................................................................................................................................. 31

、相关属性

183D ........................................................................................................................................ 31

、图表属性

19 ................................................................................................................................. 32

、自定义菜单属性

FusionCharts v3使用手册

按照编程构造结构分（只列举出了几种主要属性，主要用于B） ........................... 35

XMLXMLUILER

头部属性：

................................................................................................................................................... 35

Body ......................................................................................................... 35

属性：里面设置的属性

FusionCharts v3使用手册

一、 FusionCharts构成的基本三要素：swf，data，承载图表的载体。

Swf：Charts文件夹下面的所有swf文件，需要什么样的图表样式，就加在与之相对应的

swf文件。

Data：数据源。数据可以是*.xml, *.json 文件，也可以是代码中xml或json格式的数据。

载体：页面中装载swf的空间组件。Eg：div，span等等。

二、装载swf的注意事项

1. 装载swf的基本语法

页面必须引用

<scripttype="text/javascript" src="../ ">script>

<div id="chartdiv">FusionCharts will be loaded here!div>

var chart = new FusionCharts("../FusionCharts/",

"chartid", "400", "300", "0", "1");

aURL("../FusionData/");

("chartdiv");

：所要展现的图表类型

：图表引用的数据源

script>

FusionCharts(“swf”,”id”,”width”,”height”,”debugmodel”,”registerwithjs

”)：debugmodel 通常设置为0，registerwithjs通常设置为1.

2. 基本数据格式

XML文件

开头，以结束；或者以开头，以结束。

XML标签属性有以下四种数据类型：布尔型、数字型、字符型、十六进制颜色代码（只

4 / 36

FusionCharts v3使用手册

支持十六进制的颜色表示，且去掉前面的#号）

Eg：

xml version="1.0" encoding="UTF-8"?>

<chart caption='Weekly Sales Summary' xAxisName='Week' yAxisName='Sales'

placeValuesInside='1' useRoundEdges='1' showBorder='1'

exportHandler="fcExporter1" exportAtClient="1" exportEnabled="1"

definition>

application>

sytles>

该运行的结果如下：

exportFormats="JPEG=jpg|PDF=pdf">

chart>

5 / 36

FusionCharts v3使用手册

三、 Charts文件中的swf文件及运行结果图

Swf文件运行结果图

Single Series Charts

6 / 36

FusionCharts v3使用手册

7 / 36

FusionCharts v3使用手册

8 / 36

FusionCharts v3使用手册

Multi-series Charts

9 / 36

FusionCharts v3使用手册

10 / 36

FusionCharts v3使用手册

Stacked Charts

11 / 36

FusionCharts v3使用手册

12 / 36

FusionCharts v3使用手册

Combination Charts

13 / 36

FusionCharts v3使用手册

14 / 36

FusionCharts v3使用手册

15 / 36

FusionCharts v3使用手册

StackedColumn3DLineDY.s

MSStackedColumn2DLineDY

.swf

FusionCharts v3使用手册

17 / 36

FusionCharts v3使用手册

18 / 36

FusionCharts v3使用手册

StackedColumn3DLineDY.s

MSStackedColumn2DLineDY

.swf

Scroll Charts

19 / 36

FusionCharts v3使用手册

20 / 36

FusionCharts v3使用手册

ScrollStackedColumn2D.s

Others

21 / 36

FusionCharts v3使用手册

XY Plot Charts

PS:所有含有lenged的图表，lenged图元都具有单击事件，用于控

制是否显示该series。

数据无显示

四、结合javascript的应用

1. 前提：

置FusionCharts中的registerwithjs为1.（实际中似乎0也可以，但最好用1）

22 / 36

FusionCharts v3使用手册

2. 事件：

1) FC_Loaded(DOMId)：描述当SWF文件在客户端已经完成下载

2) FC_Rendered(DOMId)：描述swf装载完成。

3) FC_DataRendered(DOMId)：描述当图表数据已经下载到dataxml或者dataURL

4) FC_DataLoadError(DOMId)：描述当从特定的URL下载数据发生错误

5) FC_NoDataToDisplay(DOMId)：描述当下载的xml文件里没有可显示的数据

6) FC_DataXMLInvalid(DOMId)：描述xml格式错误

3. 方法

1) setDataXML(strDataXML:string):改变图表的数据

2) setDataXML(strDataXML:string):改变图表的数据

3) setDataURL(strDataURL:string)：同上

4) print()：打印图表

5) getXML()：返回图表的xml数据

6) getChartAttribute(attrNamr:string)：返回xml 标记的属性

7) hasRendered()：布尔型，标志图表是否已经呈现成功

getDataAsCSV()：返回图表的数据位CSV字符型

五、热点链接：link=’’

四种链接方式：

1. 链接到同一个窗口：link='指定页面%3F参数' (link=’?param’)

2. 链接到新的窗口：link='n-指定页面%3F参数' (link=’?param’)

3. 链接到一个指定的frame：link='F-FrameName-指定页面%3F参数'（注参数一般不能超

过两个，当超过两个则必须追加为一个字符串用逗号分隔）

4. 链接到一个弹出框：link="P-detailsWin,width=400,height=300,toolbar=no,scrollbars=no,

resizable=%3FMonth%3DJan"

5. 整个图表链接：clickURL='指定路径'

6. 链接到Js ：link="j-function()"

7. Click 事件处理：link='S-parameter'（此方法是整个图表的链接情况）

23 / 36

FusionCharts v3使用手册

六、图表数据导出

1. 使用context menu：设置属性showExportDataMenuItem='1'，并可以通过

exportDataMenuItemLabel=” ”设置导出标签的名称。这样就可以把图表中的数据复制到

剪贴板上了，然后打开记事本之类的东东就可以把数据粘贴到上面去了。

Eg:

<chart caption='Weekly Sales Summary' xAxisName='Week' yAxisName='Sales'

placeValuesInside='1' useRoundEdges='1' showBorder='1'

showExportDataMenuItem='1'

chart>

显示：在图标上右击，有Copy data to clipboard.

2. 使用JavaScript Menu：首先置registerWithJS为1，即var chart1 = new

FusionCharts("../../FusionCharts/", "chart1Id", "400", "300", "0", "1")。然后根

据charts节点id获得一个对象，使用var chartObj = getChartFromId("chart1Id")方法。最

后从这个对象取出图表里的数据，使用aAsCSV( ),然后就可以进行你需要

的处理了

24 / 36

FusionCharts v3使用手册

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

1、服务器端图表导出

1) 把jar包放到lib下面

2) 把classes文件发布到web-info下面

3) 在文件里加入exportEnabled='1'(允许导出)、

exportHandler='JSP/'(即处理导出的路径，注意：默认是在跟

在同一个跟目录下面)、还可以设置exportAction（选择导出的图片会到客户端作为

下载还是直接保存到服务器）、exportAtClient（选择是选择客户端导出还是选择服

务器端导出）等属性

4) 把、放在web工程下面（注意：里

WEB_ROOT_PATH的路径，默认情况是Resources文件直接放在web工程下的，若

将Resources文件放在其他文件包下面时注意修改WEB_ROOT_PATH路径

5) 处理流程：中指明exportHandler路径。触发导出时转向exportHandler所

指向的路径，在中调用

中的HttpServletRequest类将中的数据以流的形式传进来，将charts的宽

度、高度、颜色、domid作为元数据传入。并且根据选择是导出pdf还是图片导向

resource下面的不同页面路径。（导出时会遇到数据传入的数据为空的情况，推荐

使用客户端图表导出的方法）

2、客户端图表导出

1) 包含文件

2) 包含文件

3) 设置xml文件里的一下属性：exportEnabled='1'（允许导出） exportAtClient='1' （客

户端导出方式）exportHandler='fcExporter1'（处理导出）

25 / 36

FusionCharts v3使用手册

4) Html文件里加入

FusionCharts Export Handler Component

3、批图表导出处理：

1) 前提：要批导出的数据共用一个xml文件，即共用数据。

2) 与单个导出的不同之处：

 Charts = ['myChartId1','myChartId2','myChartId3'];

 用sourceCharts方法包含需导出的所以图表DOMid

 设置导出图片相关的属性：componentAttributes。

附注fusionCharts详细属性：

按照模块分类：

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

属性名称属性说明示例或说明

bgColor 背景颜色 bgColor='999999,FFFFF渐变 bgColor=’999999’ 单色

bgAlpha 背景透明度设置范围在1-100

showBorder 图表外是否显示边框默认二维图表显示，三维不显示

26 / 36

FusionCharts v3使用手册

borderColor 边框颜色十六进制表示去掉前面的#号

borderThickness 边框线的粗细像素表示

borderAlpha 边框透明度

bgSWF 背景图片或动画保证此图片和SWF文件在同一个文件夹

bgSWFAlpha 设置背景图片的透明度

2、图表背景属性：

属性名称属性说明示例或说明

canvasbgColor 图表背景颜色可设置单色也可以使用梯度设置渐变色

canvasbgAlpha 图表背景透明度

canvasBorderColor 图表背景边框颜色

canvasBorderThickness 图表背景边框线粗细

canvasBorderAlpha 图表背景边框透明度

3、外部引入LOGO:

属性名称属性说明示例或说明

logoURL LOGO引入的地址 logoURL='logo_'

logoPosition LOGO在图表中的位置 TL – 左上TR – 右上BL – 左下BR – 右下CC – 中间

logoAlpha LOGO的透明度

logoScale LOGO比例

4、图表名称和轴属性：

属性名称属性说明示例或说明

caption 标题

subcaption 子标题

xAxisName X轴名称

27 / 36

FusionCharts v3使用手册

yAxisName Y轴名称

rotateYAxisName Y轴名称是否旋转的显示

rotateNames X轴名称是否旋转的显示 slantLabels=’1’时，斜45度，否则斜90

outCnvbaseFont Canvas外面的字体即标题、子标题、X/Y轴名称字体

outCnvbaseFontSize Canvas外面的字体大小范围在0-72

baseFont Canvas里面的字体

baseFontSize Canvas里面的字体大小

baseFontColor Canvas里面的字体颜色

度竖排

outCnvbaseFontColor Canvas外面的字体颜色

5、data plot属性

plotGradientColor 取消梯度颜色 plotGradientColor=''

指明渐变是明度还是灰度（默认为明plotGradientColor='333333'

度，即加白色渐变）

是否显示数据块的边框柱状图是否显示外框 showPlotBorder

数据块的边框是否虚线显示 plotBorderDashed

对于柱状图是否使用圆角并且加入了glass效果 useRoundEdges

使用梯度颜色时，选择梯度角度 plotFillAngle

使用梯度颜色时，选择透明度 plotFillAlpha

6、数据横纵轴属性

showLabels 是否显示X轴标签名称默认显示

showYAxisValues 是否显示Y轴标签名称默认显示

numberPrefix Y轴数据加上前缀如numberPrefix = ‘a’

numberSuffix Y轴数据加上后缀如numberPrefix = ‘b’

formatNumberScale=’0’即可去除掉这个’k’ formatNumberScale 是否格式化数字,默认为

1(True),自动的给你的数字

加上K（千）或M（百万）；

labelDisplay 标签显示格式 WRAP（重叠）ROTATE（旋转）Stagger（交错）

slantLabels 标签旋转显示时的倾斜角

staggerLines 标签交错显示时的交错行

labelStep 横轴标签隔几个显示

yAxisValuesStep 纵轴标签隔几个显示

若取0,则不加K或M

度

数

28 / 36

FusionCharts v3使用手册

7、图表上的数据显示

showValues 是否显示图表上的数据默认显示

displayValue 自定义图表上显示的内容

rotateValues 是否旋转90度显示图表上的

placeValuesInside 是否在图表内部显示数据

数据

8、图表调色板

palette 图表块框框的渐变程度 1-5可供选择

paletteColors 图表块里面的渐变颜色 paletteColors='FF5904,0372AB,FF0000'

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

yAxisMinValue Y轴坐标的最小值

yAxisMaxValue Y轴坐标的最大值

xAxisMinValue X轴坐标的最小值

xAxisMaxValue X轴坐标的最大值

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

divLineColor 设置div的颜色

divLineThickness 设置div的线条粗细 1-5

divLineAlpha 设置div的线条透明度 1-100

divLineIsDashed 设置div是否虚线显示

showAlternateHGridColor 设置div块是否高亮显示

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

vDivLineColor 设置垂直div的颜色

vDivLineThickness 设置垂直div的线条粗细

vDivLineAlpha 设置垂直div的线条透明度

vDivLineIsDashed 设置垂直div是否虚线显示

showAlternateVGridColor 设置垂直div块是否高亮显示 alternateVGridAlpha (透明度)

alternateVGridColor (颜色)

29 / 36

FusionCharts v3使用手册

12、Zero plan相关属性

zeroPlaneColor 设置零线（面）的颜色

zeroPlaneThickness 设置零线（面）的粗细

zeroPlaneAlpha 设置零线（面）的透明度

zeroPlaneShowBorder 是否显示零面的外框只针对3D图表

zeroPlaneBorderColor 设置零面外框的颜色只针对3D图表

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

drawAnchors 是否显示线图的Anchors 默认显示

anchorSides 设置Anchors是几边形 3-20

anchorRadius 设置Anchors的大小

anchorBorderColor 设置Anchors外框颜色

anchorBorderThickness 设置Anchors外框线条粗细

anchorBgColor 设置Anchors里面的颜色

anchorAlpha 设置Anchors整体的透明度 1-100

anchorBgAlpha 设置Anchors所处背景的透明度 1-100

14、tool-tip 属性

showToolTip 鼠标放上去是否显示提示 Set属性里可自定义设置toolText

toolText 自定义提示框显示的内容

toolTipBorderColor 提示框边框的颜色

toolTipBgColor 提示框背景颜色

15、padding属性

chartLeftMargin 纵轴标题离外边框的距离

chartRightMargin Canvas右边线离外边框的距离

chartTopMargin 标题离外边框的距离

chartBottomMargin 横轴标题离外边框的距离

captionPadding Canvas上边线离图表标题的距离

xAxisNamePadding 横坐标离横轴标题的距离

yAxisNamePadding 纵坐标离纵轴标题的距离

yAxisValuesPadding Canvas左边线离纵坐标标签的距离

labelPadding Canvas下边线横坐标标签的距离

valuePadding 图表上面的数据里图表的距离

canvasPadding Canvas左边线离第一个Anchor的距离只限于线图和块图

30 / 36

FusionCharts v3使用手册

16、数据格式相关属性

decimals 设置小数点后面保留的位数

forceDecimals 是否强制保留小数点后面的

formatNumberScale 是否按默认的数据格式显示

decimalSeparator 小数点的分隔表示方式默认‘.’

thousandSeparator 千分位的分隔表示方式默认‘,’

numberScaleValue 两个联合一起使用，定义数据numberScaleValue='1000,1000,1000'

numberScaleUnit 标度 numberScaleUnit='K,M,B'

numberPrefix 数字显示的前缀 numberPrefix='$'

numberSuffix 数字显示的后缀

decimals设置的位数

17、legend相关属性

showLegend 是否显示图例说明默认显示

legendPosition 设置图例说明的位置

legendBgColor 设置图例说明的背景颜色

legendBgAlpha 设置图例说明的背景透明度

legendBorderColor 设置图例说明的边框颜色

legendBorderThickness 设置图例说明的边框粗细

legendBorderAlpha 设置图例说明的边框透明度

legendShadow 是否显示为图例说明显示阴影

legendScrollBgColor 设置图例说明滚动条的背景颜色当图例说明中有很多事件时

legendScrollBarColor 设置图例说明滚动条的颜色当图例说明中有很多事件时

egendScrollBtnColor 设置图例说明滚动条的按钮的颜色当图例说明中有很多事件时

18、3D图表属性

view2D() 以二维的形式显示 3D图表已有的方法接口

view3D() 以三维的形式显示 3D图表已有的方法接口

resetView() 重置，恢复到原先的角度 3D图表已有的方法接口

rotateView(x,y) 旋转到所选的角度 3D图表已有的方法接口

getViewAngles() 获得当前图表所处的横纵角度 var a=getViewAngles();

cameraAngX 设置图表角度（横轴角度） 0 to 360/0 to -360默认为30度

cameraAngY 设置图表角度（纵轴角度） 0 to 360/0 to -360默认为-45度

startAngX 设置图表开始的角度（横轴角度） 0 to 360/0 to -360

endAngX 设置图表结束的角度（横轴角度） 0 to 360/0 to -360

startAngY 设置图表开始的角度（纵轴角度） 0 to 360/0 to -360

endAngY 设置图表结束的角度（纵轴角度） 0 to 360/0 to -360

alert(); alert();

31 / 36

FusionCharts v3使用手册

dynamicShading 是否设置光源影响

lightAngX 设置光源的角度（横轴角度） 0 to 360/0 to -360

lightAngY 设置光源的角度（纵轴角度） 0 to 360/0 to -360

YZWallDepth 设置yz面的深度

ZXWallDepth 设置zx面的深度

XYWallDepth 设置xy面的深度

clustered 图表是否嵌入显示默认前后重叠显示

19、自定义菜单属性

showAboutMenuItem 是否显示自定义菜单默认显示

aboutMenuItemLabel 设置自定义菜单的名称 aboutMenuItemLabel ='About My Company'

aboutMenuItemLink 设置自定义菜单的链接 aboutMenuItemLink='n-

20、趋势线：

startValue='430000' endValue='450000' color='009933' displayvalue='Target'

dashed='1' dashLen='2' dashGap='2' valueOnRight ='1' />

dashed 是否虚线显示默认实线显示

dashLen 设置虚线长度

dashGap 设置虚线间隙宽度

startValue 起始值单个时一条横线，有结束值时，两点连线

endValue 结束值

displayvalue 线标示

valueOnRight 设置displayvalue显示右valueOnRight ='1'

color 设置线颜色

边

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

1、定义一个styles。definition>部分定义。基本属性有name（给type所定义

的style取的名字）、type（FusionCharts 只支持下面六种styles: Font（字体）、Animation（动

画）、Shadow（阴影）、Glow（轮廓线）、Blur（模糊化）、Bevel（产生透视，增强立体感））。

2、作用于一个对象。< application>定义。

3、对应关系

作用对象对象说明可以应用的style属性 Animation Parameters

BACKGROUND _alpha 图表所处的整Animation

Supported

_x 个背景 Shadow

32 / 36

FusionCharts v3使用手册

Glow _y

Bevel _xScale

Blur _yScale

CANVAS 单指图表填充Animation _alpha

的位置 Shadow _x

Glow _y

Bevel _xScale

Blur _yScale

CAPTION 图表的标题 Animation _alpha

Font _x

Shadow _y

Glow

Bevel

Blur

DATALABELS 图表X轴标签Animation _alpha

名称 Font _x

Shadow _y

Glow

Bevel

Blur

DATAPLOT 组成图表的数Animation _alpha

据块 Shadow _x

Glow _y

Bevel _xScale

FusionCharts v3使用手册

Glow

Bevel

Blur

TOOLTIP 当鼠标点在图Font

标上时出现的

提示框

趋势线 Animation TRENDLINES _alpha

Shadow _y

Glow _xScale

Bevel _yScale

Blur

TRENDVALUES 趋势线的值 Animation _alpha

Font _x

Shadow _y

Glow

Bevel

Blur

VLINES 垂直分隔线 Animation _alpha

Shadow _x

Glow _y

Bevel _yScale

Blur

XAXISNAME X轴的名称 Animation _alpha

Font _x

Shadow _y

Glow

Bevel

Blur

YAXISNAME Y轴名称 Animation _alpha

Font _x

FusionCharts v3使用手册