前言
这几天在公司使用了一个做图表统计的组件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文件中各个标签的属性,通过改变属性值来变化它的显示类型。