一、 FusionCharts构成的基本三要素:swf,data,承载图表的载体。
Swf:Charts文件夹下面的所有swf文件,需要什么样的图表样式,就加在与之相对应的swf文件。
Data:数据源。数据可以是*.xml, *.json 文件,也可以是代码中xml或json格式的数据。
载体:页面中装载
swf
的空间组件。
Eg
:
div
,
span
等等。
二、装载swf的注意事项
1. 装载swf的基本语法
页面必须引用
FusionCharts.js
<
script
type
=
"text/javascript"
src="../ FusionCharts.js"></script>
<
div
id="chartdiv">FusionCharts will be loaded here!</div>
<
script
type="text/javascript">
var
chart =
new
FusionCharts(
"../FusionCharts/Column3D.swf"
,
"chartid"
,
"400"
,
"300"
,
"0"
,
"1"
);
chart.setDataURL(
"../FusionData/LinkjavascriptData.xml"
);
chart.render(
"chartdiv"
);
</
script
>
Column3D.swf
:所要展现的图表类型
LinkjavascriptData.xml
:图表引用的数据源
FusionCharts(“swf”,”id”,”width”,”height”,”debugmodel”,”registerwithjs”)
:
debugmodel
通常设置为
0
,
registerwithjs
通常设置为
1.
XML
文件
<chart>
开头,以
</chart>
结束;或者以
<graph>
开头,以
</graph>
结束。
XML
标签属性有以下四种数据类型:布尔型、数字型、字符型、十六进制颜色代码(只支持十六进制的颜色表示,且去掉前面的
#
号)
Eg
:
<?
xml
version="1.0" encoding="UTF-8"?>
<
chart
caption='Weekly Sales Summary' xAxisName='Week' yAxisName='Sales'
placeValuesInside='1' useRoundEdges='1' showBorder='1' exportEnabled="1" exportHandler="fcExporter1" exportAtClient="1"exportFormats="JPEG=jpg|PDF=pdf">
<
set
label='Week 1' value='14400' displayValue='good' />
<
set
label='Week 2' value='19600' />
<
set
label='Week 3' value='24000' />
<
set
label='Week 4' value='15700' />
<
sytles
>
<
definition
>
<
sytle
name='myBevel' type='Bevel' />
</
definition
>
<
application
>
<
apply
toObject='Background' styles='myBevel'/>
</
application
>
</
sytles
>
</
chart
>
该
data.xml
运行的结果如下:
三、 Charts文件中的swf文件及运行结果图(略)
四、结合javascript的应用
置
FusionCharts
中的
registerwithjs
为
1.
(实际中似乎
0
也可以,但最好用
1
)
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
格式错误
1)
setDataXML(strDataXML:string):
改变图表的数据
2)
setDataXML(strDataXML:string):
改变图表的数据
3)
setDataURL(strDataURL:string)
:同上
4)
print()
:打印图表
5)
getXML()
:返回图表的
xml
数据
6)
getChartAttribute(attrNamr:string)
:返回
xml <chart>
标记的属性
7)
hasRendered()
:布尔型,标志图表是否已经呈现成功
8)
getDataAsCSV()
:返回图表的数据位
CSV
字符型
五、热点链接:link=’’
四种链接方式:
1.
链接到同一个窗口:
link='
指定页面
%3F
参数
' (link=’index.html?param’)
2.
链接到新的窗口:
link='n-
指定页面
%3F
参数
' (link=’n-index.html?param’)
3.
链接到一个指定的
frame
:
link='F-FrameName-
指定页面
%3F
参数
'
(注参数一般不能超过两个,当超过两个则必须追加为一个字符串用逗号分隔)
4.
链接到一个弹出框:
link="P-detailsWin,width=400,height=300,toolbar=no,scrollbars=no, resizable=no-ShowDetails.asp%3FMonth%3DJan"
5.
整个图表链接:
clickURL='
指定路径
'
6.
链接到
Js
:
link="j-function()"
7.
Click
事件处理:
link='S-parameter'
(此方法是整个图表的链接情况)
1.
使用
context menu
:设置属性
showExportDataMenuItem='1'
,并可以通过
exportDataMenuItemLabel=” ”
设置导出标签的名称。这样就可以把图表中的数据复制到剪贴板上了,然后打开记事本之类的东东就可以把数据粘贴到上面去了。
Eg:
Data.xml
<
chart
caption='Weekly Sales Summary' xAxisName='Week' yAxisName='Sales'
placeValuesInside='1' useRoundEdges='1' showBorder='1' showExportDataMenuItem='1'
>
<
set
label='Week 1' value='14400' displayValue='good' />
<
set
label='Week 2' value='19600' />
<
set
label='Week 3' value='24000' />
<
set
label='Week 4' value='15700' />
</
chart
>
显示:在图标上右击,有
Copy data to clipboard.
2.
使用
JavaScript Menu
:首先置
registerWithJS
为
1
,即
var chart1 = new FusionCharts("../../FusionCharts/Column3D.swf", "chart1Id", "400", "300", "0", "1")
。然后根据
charts
节点
id
获得一个对象,使用
var chartObj = getChartFromId("chart1Id")
方法。最后从这个对象取出图表里的数据,使用
chartObj.getDataAsCSV( ),
然后就可以进行你需要的处理了
七、表导出为pdf或者图片(JPEG和PNG)形式
1、服务器端图表导出
1)
把
jar
包放到
lib
下面
2)
把
classes
文件发布到
web-info
下面
3)
在
data.xml
文件里加入
exportEnabled='1'(
允许导出
)
、
exportHandler='JSP/FCExporter.jsp'(
即处理导出的路径,注意:默认是在跟
data.xml
在同一个跟目录下面
)
、还可以设置
exportAction
(选择导出的图片会到客户端作为下载还是直接保存到服务器)、
exportAtClient
(选择是选择客户端导出还是选择服务器端导出)等属性
4)
把
FCExporter.jsp
、
FCExporterError.jsp
放在
web
工程下面(注意:
FCExporter.jsp
里
WEB_ROOT_PATH
的路径,默认情况是
Resources
文件直接放在
web
工程下的,若将
Resources
文件放在其他文件包下面时注意修改
WEB_ROOT_PATH
路径
5)
处理流程:
data.xml
中指明
exportHandler
路径。触发导出时转向
exportHandler
所指向的路径
FCExporter.jsp
,在
FCExporter.jsp
中调用
FusionChartsExportHelper.class
中的
HttpServletRequest
类将
data.xml
中的数据以流的形式传进来,将
charts
的宽度、高度、颜色、
domid
作为元数据传入。并且根据选择是导出
pdf
还是图片导向
resource
下面的不同页面路径。(导出时会遇到数据传入的数据为空的情况,推荐使用客户端图表导出的方法)
2、客户端图表导出
1)
包含
FusionChartsExportComponent.js
文件
2)
包含
FCExporter.swf
文件
3)
设置
xml
文件里的一下属性:
exportEnabled='1'
(允许导出)
exportAtClient='1'
(客户端导出方式)
exportHandler='fcExporter1'
(处理导出)
4)
Html
文件里加入
<div id="fcexpDiv" align="center">FusionCharts Export Handler Component</div>
<script type="text/javascript">
Var myExportComponent = new FusionChartsExportObject("fcExporter1", "../../FusionCharts/FCExporter.swf");
myExportComponent.Render("fcexpDiv");
</script>
3、批图表导出处理:
1)
前提:要批导出的数据共用一个
xml
文件,即共用数据。
2)
与单个导出的不同之处:
Ø
myExportComponent.sourceCharts = ['myChartId1','myChartId2','myChartId3'];
Ø
用
sourceCharts
方法包含需导出的所以图表
DOMid