`

FusionCharts在Java中的基本使用(1)

阅读更多

 

一、介绍

 

    FusionCharts是一个基于XML和Flash的图表组件,其中FusionCharts Free是免费的,其功能也十分强大、美观。

 

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

 

    其可以用在PHP、JSP、ASP等等。

 

二、常见的图表类型

 

1.Area图

 

2.Bar图

 

3.Column图

 

4.Line图

 

5.Pie图

 

6.Stacked图

 

7.Combine图

 

三、数据源

 

    其数据源形式为XML的形式,XML形式分为单序列和多序列XML,以及其他的格式。

 

四、简单使用

 

目录结构:

 

test.html

 

data.xml

 

FusionCharts

 

   |----------Charts

 

   |                |--------------- many charts *.swf

 

   |----------JSClass

 

   |                |--------------- FusionCharts.js

 

test.html代码:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<mce:script language="JavaScript" src="FusionCharts/JSClass/FusionCharts.js" mce_src="FusionCharts/JSClass/FusionCharts.js"></mce:script>
<title>图</title>
</head>
<body>
	
	<table align='center' border="1">
		<caption>图</caption>
		
			<tr>
				<td>
					<div id='Pie' align="center">
						<script type="text/javascript">
							var chart = 
							new FusionCharts('FusionCharts/Charts/FCF_Pie2D.swf', "ChartId", "400", "300");
							chart.setDataURL("data.xml");		   
							chart.render('Pie');
						
</script>
					</div>
				</td>
			</tr>
		
	</table>
</body>
</html>

 

要注意添加以下几行代码,并注意其中的路径:

 

(1)导入JS:  <script language="JavaScript" src='FusionCharts/JSClass/FusionCharts.js '></script>

 

(2)图表显示的地方:<div id='Pie' align="center">......</div>

 

(3)脚本:用于设置显示什么图、图的数据等

 

                       <script type="text/javascript">
                            var chart =
                            new FusionCharts('FusionCharts/Charts/FCF_Pie2D.swf ', "ChartId", "400", "300");
                            chart.setDataURL("data.xml");          
                            chart.render('Pie ');
                        </script>

 

       其中,chart.render("Pie")中的Pie是你要显示图的div的id,多个图标显示时id必须唯一

 

data.xml:

 

<graph baseFont='SunSim' baseFontSize='12' caption='分析' subcaption='' yAxisMinValue='51650.1' yAxisMaxValue='71118.3' xaxisname='日期' yaxisname='数量' hovercapbg='FFECAA' hovercapborder='F47E00' formatNumberScale='0' decimalPrecision='0' showvalues='1' numdivlines='10' numVdivlines='0' shownames='1' rotateNames='1'>
  <set name='2009-10-04' value='57653' color='AFD8F8'/>
  <set name='2009-10-05' value='57389' color='F6BD0F'/>
  <set name='2009-10-06' value='59256' color='8BBA00'/>
  <set name='2009-10-07' value='62762' color='FF8E46'/>
  <set name='2009-10-08' value='63287' color='008E8E'/>
  <set name='2009-10-09' value='60109' color='D64646'/>
  <set name='2009-10-10' value='64653' color='8E468E'/>
  <set name='2009-10-11' value='61687' color='588526'/>
</graph>

 

显示效果如下:

 

 

也可以不用单独的文件存储xml,可以利用setXMLUrl方法,如下:

 

<script type="text/javascript">
							var chart = 
							new FusionCharts('FusionCharts/Charts/FCF_Pie2D.swf', "ChartId", "400", "300");
							chart.setXMLUrl("<graph baseFont='SunSim' baseFontSize='12' caption='分析' subcaption='' yAxisMinValue='51650.1' yAxisMaxValue='71118.3' xaxisname='日期' yaxisname='数量' hovercapbg='FFECAA' hovercapborder='F47E00' formatNumberScale='0' decimalPrecision='0' showvalues='1' numdivlines='10' numVdivlines='0' shownames='1' rotateNames='1'><set name='2009-10-04' value='57653' color='AFD8F8'/><set name='2009-10-05' value='57389' color='F6BD0F'/><set name='2009-10-06' value='59256' color='8BBA00'/><set name='2009-10-07' value='62762' color='FF8E46'/><set name='2009-10-08' value='63287' color='008E8E'/><set name='2009-10-09' value='60109' color='D64646'/><set name='2009-10-10' value='64653' color='8E468E'/><set name='2009-10-11' value='61687' color='588526'/></graph>");		   
							chart.render('Pie');
						
<script>
分享到:
评论

相关推荐

    FusionCharts_java后台工具

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

    FusionCharts在Android上的实现

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

    FusionCharts 例子 在eclipse下制作

    在这个文件中,引入FusionCharts库,设置图表的基本配置,以及数据源。 ```html &lt;!DOCTYPE html&gt; &lt;title&gt;FusionCharts 柱状图和饼图示例 &lt;script type="text/javascript" src="js/fusioncharts.js"&gt; &lt;!-- 添加...

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

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

    FusionCharts

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

    FusionCharts示例代码(jsp)

    在JSP环境中使用FusionCharts,首先需要在项目中引入FusionCharts的JavaScript库和相关的CSS文件。这通常通过在JSP页面的`&lt;head&gt;`标签内添加对应的`&lt;script&gt;`和`&lt;link&gt;`标签来完成。例如: ```jsp ...

    FusionCharts 使用文档

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

    FusionCharts 及中文操作手册,帮助文档,参数说明

    3. **Fusionchart++Free%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0.doc**:这是一个学习笔记文档,可能是一位用户在使用FusionCharts过程中整理的学习心得和技巧总结。 4. **FusionCharts参数说明.doc**:这份文档详细...

    FusionCharts文档

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

    FusionCharts教程

    在项目中使用FusionCharts,首先需要下载官方提供的SDK包,解压后将包含JavaScript库的文件(如`fusioncharts.js`)复制到项目目录。然后在HTML文件中通过`&lt;script&gt;`标签引入,确保在使用图表的脚本之前加载...

    简单的jsp fusioncharts例子

    1. **引入FusionCharts库**: 首先,要在JSP页面中使用FusionCharts,需要将FusionCharts的JavaScript文件引入到HTML头部。这可以通过添加`&lt;script&gt;`标签来实现,通常包括`fusioncharts.js`和`Charts.js`。 ```html...

    Fusioncharts3.2

    在本文中,我们将深入探讨FusionCharts 3.2版本,特别是其图像和PDF导出功能,以及如何在Java环境下进行配置。 **一、必要的FusionCharts文件** 1. **图形SWF文件**:这些是用于呈现不同类型的图表(例如Pie2D.swf...

    js实现图表-FusionCharts

    4. **JSP**:在Java环境中,JSP开发者可以通过FusionCharts的Java类库,结合Servlet或JSP页面来生成图表数据。 **三、图表类型及特性** 1. **多样化图表**:FusionCharts支持20+种不同类型的图表,满足各种数据分析...

    FusionCharts报表 图形实例

    1. **引入库**:首先,你需要在项目中添加FusionCharts的Java库依赖,这通常通过Maven或Gradle等构建工具完成。 2. **创建图表对象**:使用FusionCharts的Java类,创建图表对象并设置基本属性,如图表类型、宽度、...

    FusionCharts_Evaluation报表工具

    在"**FusionCharts_Evaluation**"中,我们可以预见到这是一份关于FusionCharts的评估或试用版,可能包含了该工具的各种功能演示、使用教程、示例代码和文档资源。通过这个压缩包,用户可以深入了解FusionCharts的...

    ExtJS+FusionCharts结合的两种方法

    例如,你可以使用FusionCharts的PHP、Java、.NET等服务器端库来生成图表的SVG或Flash代码,再通过Ajax请求获取这些代码,最后在ExtJS的组件中显示。 在实际应用中,我们还需要关注以下几点: - **数据源的处理**:...

    使用Xstream为FusionCharts提供XML

    总的来说,这篇博客可能涵盖了如何在Java后端使用Xstream库生成适合FusionCharts的XML数据,并在前端展示图表的全过程。这对于那些希望集成Java后端和FusionCharts的开发者来说,是一个宝贵的学习资源。

    FusionCharts Free中文开发指南

    9. **集成进现有系统**:讲解如何将FusionCharts集成到常见的Web框架和开发环境中,如PHP、ASP.NET、Java等,以及如何与后端数据库进行交互。 10. **故障排查与社区支持**:提供常见问题的解决策略,介绍...

    FusionCharts特点及技巧

    这款工具非常适合那些希望在网页中加入动态图表但又缺乏Flash编程知识的技术人员使用。 #### 二、功能描述 FusionCharts不仅仅是一个简单的图表插件,它是一个完整的图表解决方案,支持多种编程环境和技术栈。包括...

Global site tag (gtag.js) - Google Analytics