前些天根据项目需要,使用到了FusionCharts做图形报表,感觉确实挺炫。一下便是我的个人学习笔记,供初学者参考,我们先来看一下用FusionCharts设计出来的效果图。
当然,还有很多样式,很多图形,如柱状图,线性图等。具体有些啥样式在这里我就不多说了,反正很炫很强大,我们一起来做出来就知道了。
首先我们需要做的准备工作就是下载一个FusionCharts数据包,里面包括了我们后面将试用的Jar包和Js和CSS文件等,做好了这个步骤后我们可以开始编码了。把我们下载回来的FusionCharts包拷贝到MyEclipse项目中的WebRoot目录下,我这里整理成了一下形式
做完这一步后,导入下载FusionCharts包中的两个Jar文件
OK了,准备工作也就做完了,正式进入写代码的时候了。现在我们就来做一个Demo出来供大家学习
<script type="text/javascript">
function showFusionCharts(){
var myChart = new FusionCharts("FusionCharts/Charts/Pie3D.swf", "myChartId", "1000", "800");
myChart.setDataURL("Data.xml");
myChart.render("chartdiv");
}
</script>
<chart caption='my First Charts'>
<set name='Jan' value='462' />
<set name='Feb' value='857' />
<set name='Mar' value='671' />
<set name='Apr' value='494' />
<set name='May' value='761' />
<set name='Jun' value='960' />
<set name='Jul' value='629' />
<set name='Aug' value='622' />
<set name='Sep' value='376' />
<set name='Oct' value='494' />
<set name='Nov' value='761' />
<set name='Dec' value='960' />
</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文件代码
由于时间原因,写得有点零乱,望各位网友谅解。我这里把几个相关文件都留在了附件里面,有需要的朋友可以下载看一下,解压后直接导入MyEclipse就可以用了。
分享到:
相关推荐
FusionCharts Free使用JavaScript加载图形 FusionCharts Free使用dataXML加载数据 FusionCharts Free图形的基本元素 FusionCharts Free和XML FusionCharts Free和组合图XML 动态改变图形的类型和数据 FCF中的...
2、FusionCharts 3.1版的破解器:fusionChartsCracker.rar,有了这个破解器,可以自己下载官方的评估版自己破解自己使用; 3、收集了3.1版的FusionCharts Free中文开发指南.pdf,PDF格式,对E文不好的朋友有很大的帮助...
关于FusionCharts的基本介绍我就不在这里浪费篇幅了,想了解的朋友自己去www.baigoogedu.com里面找吧。我就说说FusionCharts的官方四大分类: 1.FusionCharts 2.FusionMaps 3.FusionWidgets 4.PowerCharts 每种类型我...
这个程序是自己写的一个关于fusioncharts的简单应用,基本上把fusioncharts的作用体现了出来,通过修改这个程序可以实现你需要的功能。这个程序是学习fusioncharts很好的入门程序。
2、FusionCharts 3.1版的破解器:fusionChartsCracker.rar,有了这个破解器,可以自己下载官方的评估版自己破解自己使用; 3、收集了3.1版的FusionCharts Free中文开发指南.pdf,PDF格式,对E文不好的朋友有很大的帮助...
FusionCharts使用手册,对趋势图、柱状图、各种图的基本参数配置
大名鼎鼎的FLASH图表组件,强烈推荐! 官方网站地址:http://www.fusioncharts.com<br>主要特点: 1)服务器无关性,...只需要有FLASHPLAYER即可(基本普及) 5)调用方便,官方网站上有详细的API文档和DEMO
一个flash统计图工具,很方便、漂亮。...免费版功能基本够用了(二维柱状图、三维柱状图、曲线图、二维饼图、三维饼图、柱状图和曲线图的组合...),柱状图、曲线图支持单条,多条。这里提供一个免费版的下载。
最近要做一个决策支持的报表系统,遂研究了下FusionCharts实现报表,写了个简单的Demo,基本上实现了钻取、图片及PDF文件的客户端保存、打印等小功能。初学浪费了不少时间,有很多东西都不懂,所以也根据自己遇到的...
该文档介绍了flex的基本使用情况,包括安装,基本语法,与struts的结合,怎样调用后台数据,特效的使用,fusioncharts的使用等
fusionCharts V3.3 破解版本 dragnode.swf 可拖动 自动生成树形拓扑结构节点,根据生成的节点计算展现位置 package com; import java.util.ArrayList; import java.util.HashMap; import java.util.Iterator; ...
该文档详细介绍了flex3的安装使用,基本语法,与java后台的通信,结合fusioncharts的使用以及特效的使用
FusionCharts Free可以简洁地与用户进行交互,更重要的是,这基本上是一个完全免费的东西,使用它不会为自己带来太多困扰。事实上,不仅是HTML JavaScript,无论是何种服务器端编程语言,比如PHP,ASP, .NET, JSP, ...
Report Viewer控件,以及GDI+进行绘制图标,下面介绍下可以生成图表更生动的FusionCharts Free画图,它可以更简洁地与用户进行交互,更重要的是,这基本上是一个完全免费的东西,使用它不会为自己带来太多困扰。...
功能强大的flash图表显示 (集合了基本上常用的图表模板)见内容首页
我们已经使用它为 PC、Mac、Linux、iOS 和 Android 构建应用程序……现在轮到您了…… 该模板为您设置了一个基本的导航式架构。 下面是一些“兴趣点”供您调查以及一些简要说明。 如需更多信息,请访问我们的 兴趣...
不了解FusionCharts的人可以看看这个介绍: FusionCharts是一种制图组件,可以...其图表类型各式各样,包括从诸如饼型图表、条型图表和折线图表等的基本图表到诸如真实三维图表、滚动图表和自动更新图表等的高级图表。
FusionCharts Free可以简洁地与用户进行交互,更重要的是,这基本上是一个完全免费的东西,使用它不会为自己带来太多困扰。事实上,不仅是HTML+JavaScript,无论是何种服务器端编程语言,比如PHP,ASP, .NET, JSP, ...
FusionCharts Free可以简洁地与用户进行交互,更重要的是,这基本上是一个完全免费的东西,使用它不会为自己带来太多困扰。事实上,不仅是HTML+JavaScript,无论是何种服务器端编程语言,比如PHP,ASP, .NET, JSP, ...
SmartStat流量统计系统采用了全新高效的程序算法和精心优化的数据库结构,在图表展示方面采用FusionCharts组件生成FLASH图表,现已具备网站访问统计系统所必须的大部分功能,并且正将这些功能一步步完善。...