FusionChar入门(V3)

参考资料
1 fusionchart在jsp中的展现工具类
http://gaojiewyh.iteye.com/blog/497926
2 FusionCharts图表生成方式及实例-3D饼图
http://qify.iteye.com/blog/754509
3 FusionCharts link中文乱码 字体大小 解决办法 - FusionCharts参数说明
http://www.iteye.com/topic/722567
4 FusionCharts Free中文开发指南 PDF下载
http://www.blogjava.net/daozhanga/archive/2009/04/26/267593.html
5 FusionCharts3v破解版下载
http://www.cnblogs.com/ATree/archive/2010/04/20/FusionCharts3v-flash.html
6 lighttpd下rails FusionCharts图表
http://www.iteye.com/topic/225884

FusionCharts说明
FusionCharts 是一个跨浏览器和跨平台的flash图表组件，能够被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面 甚至PPT调用. 几乎所有你知道的语言它都支持。

安装：
下载FusionCharts文件
1、WEB项目下建立一个目录：charts
2、将目录Charts下的所有swf文件全部拷贝到charts目录下
3、将JSClass下的FusionCharts.js文件，拷贝到charts目录下

示例代码如下:

 <script type="text/javascript" src="../charts/FusionCharts.js"></SCRIPT>
 <script type="text/javascript">

      function getXMLData(){
	  var  xmlInfo = "<chart caption='销售图表' xAxisName='月份' yAxisName='销售金额' showValues='0' formatNumberScale='0' showBorder='1'>";
	  xmlInfo += "<set name='一月' value='462' color='AFD8F8' />";   
                xmlInfo += "<set name='二月' value='857' color='F6BD0F' />";   
	  xmlInfo += "<set name='三月' value='671' color='8BBA00' />";   
	  xmlInfo += "<set name='四月' value='494' color='FF8E46' />";   
	  xmlInfo += "<set name='五月' value='761' color='008E8E' />";   
	  xmlInfo += "<set name='六月' value='960' color='D64646' />";   
	  xmlInfo += "<set name='七月' value='629' color='8E468E' />";   
	  xmlInfo += "<set name='八月' value='622' color='588526' />";   
	  xmlInfo += "<set name='九月' value='376' color='B3AA00' /> ";  
	  xmlInfo += "<set name='十月' value='494' color='008ED6' />";   
	  xmlInfo += "<set name='十一月' value='761' color='9D080D' /> ";  
	  xmlInfo += "<set name='十二月' value='960' color='A186BE' /> ";  
	  xmlInfo += "</chart>";
	  return xmlInfo;
  }

       window.onload = function(){
             //此处由处部传入SWF文件名称
              var myChart1 = new FusionCharts("../charts/${param.swf}.swf", "myChartId", "800", "400");
              //myChart1.setDataXML(getXMLData());
              myChart1.setDataURL("data/Data2.xml");			     
              myChart1.render("chart1div");
 }
<div id="chart1div" style="width:100%;height:100%;"></div>

工程中用到的SWF文件是:FusionCharts3v破解版的文件
具体参见工程demo.
工程图片:


FusionCharts常见问题
1 加载XML文件乱码
经过测试只需要在XML头部进行编码声明就行了,一定为:GBK,GB2312
<?xml version="1.0" encoding="GBK"?>
2 在图表中加入事件
<set name='七月' value='629' link='javascript:showFusinValue("650")'/>  
<set name='八月' value='622' link='javascript:showFusinValue(622)'/>

总结:一般都不会用到静态的XML文件,都是通过AJAX组装成XML的字符串,前台调用显示.
本工程只演示了常见的图表示例,具体可参照官方在线DEMO,重要的是查看它的XML文件

评论

2 楼 软件帝国 2011-04-02  

再次感谢 顶顶

1 楼 软件帝国 2011-04-02  

多谢大侠 正需要呢