`
ynshun
  • 浏览: 91454 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

FusionCharts基本使用

阅读更多

       前些天根据项目需要,使用到了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就可以用了。

分享到:
评论
12 楼 Shuhui 2014-08-04  
[align=right][align=center][size=large][size=small][color=brown]
[flash=200,200][flash=200,200][flash=200,200]
[flash=200,200][url][url][list]
[*][list]
[*][*]
引用
[u][u][u][u][u][u][u][i][i][b][b][/b][/b][/i][/i][/u][/u][/u][/u][/u][/u][/u]
  • [/list]
  • [/list][/url][/url][/flash]
    [/flash][/flash][/flash]|||||
    ||
    |
    |
    [/color][/size][/size][/align][/align]                              
    11 楼 liuweihug 2014-05-27  
    fusioncharts 图片2种方式使用java导出 - 项目实战 - IT工作生活这点事。Just Such So!
    http://www.suchso.com/projecteactual/fusioncharts-image-output-java.html
    10 楼 strawren 2013-12-10  
    这个fusionchart免费的吗
    9 楼 javaerman 2013-12-06  
    thank you 希望以后多多交流
    8 楼 llnyxxzj 2013-11-28  
    [flash=200,200][/flash]
    7 楼 thjjava 2013-07-16  
    很好,正在做这样的图表,3Q
    6 楼 rick123456 2013-01-09  
    我也正在用这款东东,我也翻译了一些FusionCharts的技术文,档,

    Flash图表组件FusionCharts使用教程大全:http://www.evget.com/zh-CN/info/catalog/18405.html

    望多指点
    5 楼 ynshun 2011-12-03  
    欢迎大家相互交流,有任何需要都可以联系我哦
    4 楼 yeanjone 2011-11-14  
    我想问下,为什么我画柱状图和折线图的混合图时,引用的那个js报错了呢??
    3 楼 yeanjone 2011-11-10  
    嘿嘿,最近正在学,谢谢分享!!!有不懂的问题能像你请教吗??
    2 楼 ynshun 2011-08-31  
    大家相互学习,能帮上忙我也很高兴啊!
    1 楼 南通ori 2011-08-25  
    我正在用。想做个3D饼图。3Q

    相关推荐

      FusionCharts区域图例子

      1. **FusionCharts基本使用** - 安装与引入:首先需要下载并引入FusionCharts库,包括JS和CSS文件。 - 初始化图表:创建一个HTML元素作为图表容器,并在JavaScript中创建图表对象,设置图表类型、宽度、高度、数据...

      FusionCharts free使用手册

      **FusionCharts免费使用手册** FusionCharts是一款强大的JavaScript图表库,它允许开发者轻松地在网页上创建交互式、丰富多彩的图表。这份免费使用手册将深入介绍如何利用FusionCharts来构建各种图表,以增强数据...

      fusioncharts的使用和实例

      ### FusionCharts的基本概念 1. **图表类型**:FusionCharts支持多种图表类型,如条形图、折线图、饼图、散点图、雷达图、甘特图等,每种图表都有其特定的应用场景和数据表示方式。 2. **数据格式**:FusionCharts...

      fusion charts demo

      1. **FusionCharts基本使用**:如何安装和初始化FusionCharts库,以及如何创建基本的图表。 2. **数据格式化**:FusionCharts接受JSON或XML格式的数据,了解如何将数据库或其他数据源的数据转换为这些格式。 3. **...

      FusionCharts 使用文档

      在Java Web工程中使用FusionCharts,首先需要将所有Flash文件(通常在下载包的Charts目录下)复制到WebRoot目录,这些文件是生成图表的模板。接着,将`FusionCharts.jsp`文件(在Includes包中)放入WebRoot或其子...

      FusionCharts

      开发者会在这里看到如何创建一个基本的图表结构,例如通过`&lt;script&gt;`标签引入`FusionCharts.js`,然后使用JavaScript代码实例化图表对象并设置数据。 `Data.xml`是FusionCharts的数据源文件,它可以是XML、JSON或者...

      fusionCharts

      FusionCharts是一款强大的数据可视化工具,专为创建交互式、丰富多彩的...这些文件为我们提供了学习和使用FusionCharts的资源,通过深入研究这些内容,开发者可以更好地理解和掌握FusionCharts的使用方法和高级特性。

      fusioncharts使用范例.

      在本示例中,我们将探讨如何使用FusionCharts来创建一个饼状图。 首先,从提供的代码片段可以看到,创建FusionCharts图表的基本步骤如下: 1. **引入JavaScript库**: 在HTML文件的`&lt;head&gt;`部分,通过`&lt;script&gt;`...

      FusionCharts完整资料集

      FusionCharts基本概念 FusionCharts是一种基于Web的图表工具,它使用JavaScript和SVG(可缩放矢量图形)技术来展示动态、富有交互性的图表。通过XML或JSON数据格式,FusionCharts能够将各种类型的数据转换成易于...

      FusionCharts在Android上的实现

      首先,要在Android应用中使用FusionCharts,我们需要理解其基本工作原理。FusionCharts主要基于HTML5和Web技术,因此在Android上实现它通常涉及到在应用中嵌入一个WebView组件。WebView是Android系统提供的用于加载...

      利用FusionCharts 实现数据图表展示

      2. **创建图表对象**:使用JavaScript创建FusionCharts对象,并设置图表的基本属性,如类型、宽度、高度、标题、数据源等。 3. **加载数据**:数据可以是内联的JSON字符串,也可以是从服务器异步获取的。如果你选择...

      FusionCharts 图形报表展示

      ### 一、FusionCharts的基本概念 1. **图表类型**:FusionCharts支持多种图表类型,包括折线图、柱状图、饼图、散点图、热力图、甘特图等,满足不同数据展示需求。 2. **数据格式**:数据可以以XML、JSON或纯...

      FusionCharts文档

      它详细介绍了如何安装FusionCharts,设置图表的基本结构,以及如何在网页中嵌入图表。教程中还会涵盖各种图表类型(如柱状图、饼图、线图、散点图等)的创建方法,以及如何配置图表属性,实现个性化展示。此外,教程...

      简单的jsp fusioncharts例子

      首先,我们需要了解FusionCharts的基本概念。FusionCharts是一款基于SVG(Scalable Vector Graphics)的交互式图表库,支持超过90种图表类型,包括柱状图、饼图、线图、组合图等。它通过JavaScript和XML数据源来渲染...

      FusionCharts3.1 最全破解版

      2、FusionCharts 3.1版的破解器:fusionChartsCracker.rar,有了这个破解器,可以自己下载官方的评估版自己破解自己使用; 3、收集了3.1版的FusionCharts Free中文开发指南.pdf,PDF格式,对E文不好的朋友有很大的帮助...

      FusionCharts_XT api

      提供的`FusionCharts_XT_Evaluation`文件可能包含FusionCharts XT的示例代码和演示应用,这些示例通常涵盖了基本图表创建、数据源操作、图表交互等多个方面。通过查看和运行这些示例,开发者能快速掌握FusionCharts ...

      FusionCharts_java后台工具

      在IT行业中,FusionCharts是一个广泛使用的图表库,它提供了丰富的图表类型以及强大的交互功能,使得数据可视化变得简单易行。本项目主要关注的是如何在Java后端与FusionCharts结合,通过JavaBean实体类、Action类...

      springmvc例子,FusionCharts例子(前台 java_FusionCharts后台)

      在这个例子中,我们将深入探讨如何在Spring MVC项目中集成并使用FusionCharts来展示从后台数据库获取的数据。 首先,让我们理解Spring MVC的基本工作流程。Spring MVC通过DispatcherServlet接收HTTP请求,然后将...

    Global site tag (gtag.js) - Google Analytics