漂亮又好用的图表组件——FusionCharts

来源：互联网发布：java task定时器编辑：程序博客网时间：2024/04/27 17:04

前言

这几天在公司使用了一个做图表统计的组件FusionCharts，感觉挺好用的，也很漂亮（flash效果的），今天来跟大家一起分享下。

正题

一、简介

FusionCharts是一个Flash的图表组件，它可以用来制作数据动画图表，其中动画效果用的是Adobe Flash 8 （原Macromedia Flash的）制作的flash ，FusionCharts可用于任何网页的脚本语言类似于HTML ， .NET，ASP ， JSP技术的， PHP ， ColdFusion等，提供互动性和强大的图表。使用XML作为其数据接口，FusionCharts充分利用流体美丽的Flash创建紧凑，互动性和视觉逮捕图表。

ps：详细信息可参考百度百科：http://baike.baidu.com/view/2153728.htm

二、分类

FusionCharts支持多种图形显示，而且还支持2D和3D的效果，具体分类为：

1.柱状图和直方图 - 2D 和 3D

2.直线图和面积图 - 2D 和 3D

3.饼图和圆环图 - 2D 和 3D

4.散点图和气泡图 -只有 2D

5.堆栈图表- 2D和3D

6.双轴图表- 2D和3D

7.组合图表 - 允许您将直线图、面积图或柱状图在单个图表中组合在一起。包括2D和3D。

8.滚动图 - 交互式图表，允许您在客户端对数据点进行滚动。

9.真3D图表- 一种独一无二的基于web的图表，允许您在客户端以可视化的方式对摄像头的角度和视角进行更改。您可以旋转图标，在2D和3D之间来回切换，显示/隐藏标签或完成大量其他图表上的交互任务。

每种图形可以有多种不同的显示方式，详情参见：http://www.fusioncharts.com/demos/gallery/#column-and-bar

三、实例

新建一个Data文件夹存放xml配置文件（数据源），Charts文件夹中存放swf文件（图表类型）和fusionCharts.js文件。

1.Chart文件夹

我们以Column2D.swf（柱状图）为例，当然还有其他的swf文件，每一种图表都有对应的swf文件，其作用就是展示flash效果。

ps：具体其他的swf文件请参考附件。

2.Data文件夹

由于我们以柱状图为例，那么我就来写一个柱状图的数据源（一个set就是一个数据源，可以支持多数据源）。

test_Column2D.xml：

<?xmlversion="1.0" encoding="gb2312"?><chartrotateYAxisName='0' palette='2' baseFont='宋体' baseFontSize='12' caption=''xAxisName='时间'  yAxisName='数量'showValues='0' decimals='0' formatNumberScale='0' useRoundEdges='1'><setlabel='2011年' value='300' /><setlabel='2012年' value='150' /></chart>

ps：附件中已经为每种图形的xml配置写好了样本，大家直接在其基础上更改数据和显示内容即可。

3.页面文件

在页面里面需要加载fusioncharts.js文件，然后对应的调用swf文件和xml文件即可。

test_funsioncharts.html：

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type" content="text/html;charset=gb2312"><title>统计报表</title><scriptlanguage="JavaScript"src="Charts/FusionCharts.js"></script></head><body><divid="chartdiv" align="center">FusionCharts.</div>    <scripttype="text/javascript">    <!-- 加载swf文件，指定图表类型 -->    var chart = newFusionCharts("Charts/Column2D.swf", "ChartId","600", "300", "0", "0");    <!-- 加载数据源 -->   chart.setDataURL("Data/test_Column2D.xml");                       <!-- 将图表显示到对应的位置，即id为chartdiv的标签上 -->    chart.render("chartdiv");    </script></body></html>

funsioncharts的使用就是这么简单，如果你想要更复杂的效果则需要熟悉xml文件中各个标签的属性，通过改变属性值来变化它的显示类型。