FusionCharts Free
在上一篇文章中简单介绍了三款统计图控件，其中FusionCharts Free是我个人觉得很不错的一款。其实类似的支持XML的Flash统计图控件还有amCharts等。只是在使用FusionCharts Free的过程中发现了一些不足，比如饼状图不支持智能标签（SmartLabels），所以数据项很多的时候提示文字相互重叠，显得很乱；多系列的柱状图（Multi-series Column 3D/2D Chart ）不支持横向滚动条等等。于是后来我换了与FusionCharts Free同版本号的FusionCharts 3.1Evaluation版（官网现在最新版是3.2>>）。
下载的压缩包里开发文档首页如下图：
Evaluation版功能相对Free版强大了很多，支持前面提到的SmartLabels和Scroll Charts（Scroll Charts只有2D的）。只是Flash统计图的左上角有FusionCharts的相关文字和链接，这一点可能会让部分人不爽而弃之不用或选择破解版。个人感觉几个文字和链接不影响什么，实在觉得不爽就买正式版本吧（价格还挺贵的……）。
接下来进入正题，讲我在实际应用中做的几个综合效果中的一个吧。
用到了FusionCharts中的Single Series Pie 3D Chart、Single Series Column 2D、Grid Component，还有JavaScript functions as links这一属性，结合jQuery实现。效果如下：
页面代码：
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=utf-8"
/>
<
title
>
Demo
</
title
>
<
meta
http-equiv
="X-UA-Compatible"
content
="IE=7"
/>
<
link
rel
="stylesheet"
href
="Contents/Style.css"
type
="text/css"
/>
<
script
type
="text/javascript"
language
="JavaScript"
src
="JSClass/jquery-1.3.2.js"
></
script
>
<
script
type
="text/javascript"
language
="JavaScript"
src
="JSClass/getPos.js"
></
script
>
<
script
type
="text/javascript"
language
="JavaScript"
src
="JSClass/FusionCharts.js"
></
script
>
<
script
type
="text/javascript"
language
="JavaScript"
src
="JSClass/FusionChartsExportComponent.js"
></
script
>
<
script
type
="text/javascript"
>
//
1、测试发现不同浏览器显示有一定差异(主要是位置略有偏移)，未针对该问题进行处理；
//
2、FusionCharts文档中对各种图的XML属性有详尽的说明，查阅相应图的XML说明即可快速了解。其他属性和功能都可以查看对应的文档说明。
$(
function
() {
//
最后一个参数"1"用于注册脚本，使flash文件可以调用页面中的JS方法，高版本的flash player需要做安全设置
var
chart
=
new
FusionCharts(
"
Charts/Pie3D.swf
"
,
"
ChartId
"
,
"
800
"
,
"
500
"
,
"
0
"
,
"
1
"
);
chart.setDataURL(
"
Data/Pie3D.xml
"
);
//
读取数据文件
//
setDataXML方法则是接收XML字符串（可以使用XSLT转换XML得到符合FusionCharts相应图的XML格式的数据，也可以直接生成对应格式的XML）
chart.render(
"
chartDiv
"
);
//
追加图到DIV，实际内容为显示flash的HTML字符串
getDetail(
"
0
"
);
//
右侧显示详细信息的统计图
//
导出功能
var
myExportComponent
=
new
FusionChartsExportObject(
"
fcExporter1
"
,
"
Charts/FCExporter.swf
"
);
myExportComponent.Render(
"
fcexpDiv
"
);
})
function
getDetail(agr) {
//
设置右侧DIV的位置
var
pos
=
getElementPos(
"
chartDiv
"
);
var
popx
=
0
;
var
popy
=
0
;
popx
=
pos.x;
popy
=
pos.y;
$(
"
#popupDiv
"
).css(
"
top
"
, popx
+
5
+
"
px
"
);
$(
"
#popupDiv
"
).css(
"
left
"
, popy
+
503
+
"
px
"
);
var
myChart
=
new
FusionCharts(
"
Charts/Column2D.swf
"
,
"
myChart
"
,
"
300
"
,
"
240
"
,
"
0
"
,
"
0
"
);
myChart.setDataURL(
"
Data/Data.xml
"
);
myChart.render(
"
chartDiv_Right_top
"
);
var
myGrid
=
new
FusionCharts(
"
Charts/SSGrid.swf
"
,
"
myGrid1
"
,
"
300
"
,
"
240
"
,
"
0
"
,
"
0
"
);
myGrid.setDataURL(
"
Data/Data.xml
"
);
//
添加参数
myGrid.addVariable(
'
showPercentValues
'
,
'
1
'
);
myGrid.addVariable(
'
showShadow
'
,
'
1
'
);
myGrid.render(
"
gridDiv_Right_bottom
"
);
$(
"
#popupDiv
"
).slideDown(
"
30000
"
);
//
向下展开显示
//
agr可以作为参数以对应获得不同的XML，比如对应不同的XML文件，或者发送AJAX请求得到不同的XML字符串
//
alert(agr);
}
</
script
>
</
head
>
<
body
>
<
div
>
<
div
id
="chartDiv"
align
="left"
>
</
div
>
<
div
id
="fcexpDiv"
>
</
div
>
<
div
id
="popupDiv"
style
="position: absolute; z-index: 100; width: 300px; display: none;
background-color: #D6EAFF;"
>
<
div
align
="right"
>
<
span
style
="cursor: pointer;"
onclick
="$('#popupDiv').slideUp('30000')"
title
="关闭"
>
×
</
span
>
</
div
>
<
div
id
="chartDiv_Right_top"
style
="width: 300px; height: 240px;"
>
</
div
>
<
div
id
="gridDiv_Right_bottom"
style
="width: 300px; height: 240px;"
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
完整DEMO下载：MyFusionChartsDemo.rar