码迷,mamicode.com
首页 > 其他好文 > 详细

FushionCharts

时间:2015-01-12 10:49:23      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:

FushionCharts官网:http://www.fusioncharts.com/

在线Demo:http://www.fusioncharts.com/free/demos/Blueprint/

   首先我们需要做的准备工作就是下载一个FusionCharts数据包,里面包括了我们后面将试用的Jar包和Js和CSS文件等,做好了这个步骤后我们 可以开始编码了。把我们下载回来的FusionCharts包拷贝到MyEclipse项目中的WebRoot目录下,我这里整理成了一下形式

技术分享

做完这一步后,导入下载FusionCharts包中的两个Jar文件

技术分享

OK了,准备工作也就做完了,正式进入写代码的时候了。现在我们就来做一个Demo出来供大家学习

Js代码代码  技术分享
  1. <script type="text/javascript">  
  2.     function showFusionCharts(){  
  3.         var myChart = new FusionCharts("FusionCharts/Charts/Pie3D.swf", "myChartId", "1000", "800");  
  4.           
  5.         myChart.setDataURL("Data.xml");  
  6.         myChart.render("chartdiv");  
  7.     }  
  8. </script>  
Js代码代码  技术分享
  1. <chart caption=‘my First Charts‘>  
  2.  <set name=‘Jan‘ value=‘462‘ />  
  3.  <set name=‘Feb‘ value=‘857‘ />  
  4.  <set name=‘Mar‘ value=‘671‘ />  
  5.  <set name=‘Apr‘ value=‘494‘ />  
  6.  <set name=‘May‘ value=‘761‘ />  
  7.  <set name=‘Jun‘ value=‘960‘ />  
  8.  <set name=‘Jul‘ value=‘629‘ />  
  9.  <set name=‘Aug‘ value=‘622‘ />  
  10.  <set name=‘Sep‘ value=‘376‘ />  
  11.  <set name=‘Oct‘ value=‘494‘ />  
  12.  <set name=‘Nov‘ value=‘761‘ />  
  13.  <set name=‘Dec‘ value=‘960‘ />  
  14. </chart>  

 注意:

在使用在该FusionCharts对象是,别忘了导入FusionCharts.js文件。

var myChart = new FusionCharts("FusionCharts/Charts/Pie3D.swf", "myChartId", "1000","800");
这 一句实例化了一个FusionCharts对象出来,其中第一个参数FusionCharts/Charts/Pie3D.swf就是指出你需要显示的图 标样式所对应的目录,根据我前面FusionCharts在myEclipse中的布局,打开charts目录就是了,这里面就是你对应的样式了;

第二个参数myChartId是对该实例化的FusionCharts对象定义的一个ID号,可以自己根据自己需要随意取;

第三个和第四个参数分别指明该实例化的FusionCharts对象的长和宽。

myChart.render("chartdiv");      这一句指明了FusionCharts对象的显示地方,我这里是定义了一个<div id="chartdiv>

myChart.setDataURL("Data.xml"); 这一句指明了FusionCharts对象的数据来源,我这里为了方便,写了一个XML文件Data.xml放到了WebRoot跟目录下。

 

 

最后,在适当的地方调用该定义FusionCharts对象的方法就可以看到效果了,简单吧。

 

最后来总结一下:

1、准备工作整理下载回来的FusionCharts数据包,保留Charts样式、FusionCharts.js、编写XML文件。

2、导入FusionCharts.js文件

3、编写jsp文件代码

FushionCharts

标签:

原文地址:http://www.cnblogs.com/nickhan/p/4217785.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!