FusionCharts-part1-简介

七

FusionCharts-part1-简介

wilensky 其它 2009-07-08

公司的访问统计系统要改版，重点就是改变统计数据的显示方式，之前一直采用自己处理数据，计算，并生成html代码来显示图表，这样效率不是很高，而且图表不是很好看，所以这次觉定用flash方式来处理图表显示^_^
由于部门内部用到了BugFree系统，对里面那个统计报表很感兴趣，Google和Baidu后发现BugFree用的是FusionCharts的免费版本，试用了一下很牛X啊，尤其是效果真的很赞，嘿嘿，决定就用这个了。
简单介绍一下，FusionCharts是可以帮助我们创建其引人注目的动态图像效果的Macromedia Flash控件。
官方主页：http://www.fusioncharts.com/
官方提供试用版本下载，功能与正式版一样，但是试用版本在生成的每个Macromedia Flash的左上角有一个链接到产品主页的链接，这个用起来就不爽了，而且老板不会允许这样的情况出现的。如果选择正版的话，买一套这个要将近5000美刀啊，额滴神啊，这个太贵了。无奈还是寻找D版吧，在网上查了一下这个的D版方法很多啊，其实用google搜索其SWF文件的关键字就能找到破解版的flash了，当然是那个左上角的链接被K掉了。我们只要把正式版的的那些swf文件拿过来就可以了，这里就不给大家提供下载地址了，有需要的筒子可以去自己G一下。
这个使用起来也是相当easy，基本不用怎么改动原有的页面结构，因为是以Flash的形式显示，所以只要在要显示图标的地方嵌入相应的Flash就可以了。
以下是一个简单的例子：

<html>
<head>
<title>My First FusionCharts</title>
</head>
<body bgcolor="#ffffff">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=
<a href="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0">http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0</a>" wi
dth= "600" height="500" id= "Column3D" >
<param name="movie" value= "../FusionCharts/FCF_Column3D.swf" />
<param name="FlashVars" value= "&dataURL=Data.xml&chartWidth=600&cha
rtHeight=500">
<param name="quality"value= "high" />
<embed src="../FusionCharts/FCF_Column3D.swf" flashVars="&dataURL= Dat
a.xml&chartWidth=600&chartHeight=500" quality="high" width= "600" height="500" name="C
olumn3D" type="application/x-shockwave-flash" pluginspage= "<a href="http://www.macromedia.com/go">http://www.macromedia.com/go</a>
/getflashplayer"/>
</object>
</body>
</html>

看一下效果图：演示页 FusionChartsFree 不过这样的用法有一个不好的地方，就是IE在加载页面的时候会提示是否启用控件，要点一下才能显示图表，所以官方还提供了Js方法调用Flash输出，这样就避免了这个问题。所不同的就是要首先在页面Head中引入一个JS文件，其次在页面上需要调用的地方定义一个DIV，并命名一个ID，最后在此DIV下方加入js调用代码即可。
Js代码如下：

<script type="text/javascript">
var myChart = new FusionCharts("fuc/Charts/Column3D.swf", "myChartId", "500", "400");
myChart.setDataURL("dataxml/Column3D.xml");
myChart.render("chartdiv");
</script>

var myChart = new FusionCharts(“fuc/Charts/Column3D.swf”, “myChartId”, “500″, “400″);
。使用JavaScript 的几个好处，一是代码量大大减少，特别是当一个页面上有几个图形时。二是代码更加直观。三是可以避免IE 出现“单击以激活使用这个控件”的提示。这里面的几个参数说明一下：
第一个参数是SWF 文件的地址。
第二个是图形的id。这个id 你可以随便叫什么，但是要注意，在后面我们讲到一个页面里有多个图形的时候，这个id 一定要是唯一的。
第三个参数是图形的宽。
第四个参数是图形的高。
我们还要设置数据文件的地址。
1. myChart.setDataURL(“Data.xml”);
最后，我们把图形渲染在指定的地方。
2. myChart.render(“chartdiv”);
“chartdiv”就是前面的DIV 的id，这就表示把图形render 到”chartdiv”。
好了，今天就写到这里了，下一篇文章讲详细介绍一些FusionCharts的功能。

———————————-华丽的分割线————————————————-

声明：本博客发表的文章若未经注明为转载，则皆为本站原创，欢迎转载，转载请注明出处。O(∩_∩)O谢谢