一、介绍
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
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，可以利用setDataXML方法，如下：
<script type="text/javascript">
var chart =
new FusionCharts('FusionCharts/Charts/FCF_Pie2D.swf', "ChartId", "400", "300");
chart.setDataXML("<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>
分享到：
相关推荐
在IT行业中，FusionCharts是一个广泛使用的图表库，它提供了丰富的图表类型以及强大的交互功能，使得数据可视化变得简单易行。本项目主要关注的是如何在Java后端与FusionCharts结合，通过JavaBean实体类、Action类...
首先，要在Android应用中使用FusionCharts，我们需要理解其基本工作原理。FusionCharts主要基于HTML5和Web技术，因此在Android上实现它通常涉及到在应用中嵌入一个WebView组件。WebView是Android系统提供的用于加载...
在这个例子中，我们将深入探讨如何在Spring MVC项目中集成并使用FusionCharts来展示从后台数据库获取的数据。 首先，让我们理解Spring MVC的基本工作流程。Spring MVC通过DispatcherServlet接收HTTP请求，然后将...
在这个文件中，引入FusionCharts库，设置图表的基本配置，以及数据源。 ```html <!DOCTYPE html> <title>FusionCharts 柱状图和饼图示例 <script type="text/javascript" src="js/fusioncharts.js"> <!-- 添加...
开发者会在这里看到如何创建一个基本的图表结构，例如通过`<script>`标签引入`FusionCharts.js`，然后使用JavaScript代码实例化图表对象并设置数据。 `Data.xml`是FusionCharts的数据源文件，它可以是XML、JSON或者...
在JSP环境中使用FusionCharts，首先需要在项目中引入FusionCharts的JavaScript库和相关的CSS文件。这通常通过在JSP页面的`<head>`标签内添加对应的`<script>`和`<link>`标签来完成。例如： ```jsp ...
在Java Web工程中使用FusionCharts，首先需要将所有Flash文件（通常在下载包的Charts目录下）复制到WebRoot目录，这些文件是生成图表的模板。接着，将`FusionCharts.jsp`文件（在Includes包中）放入WebRoot或其子...
3. **Fusionchart++Free%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0.doc**：这是一个学习笔记文档，可能是一位用户在使用FusionCharts过程中整理的学习心得和技巧总结。 4. **FusionCharts参数说明.doc**：这份文档详细...
在项目中使用FusionCharts，首先需要下载官方提供的SDK包，解压后将包含JavaScript库的文件（如`fusioncharts.js`）复制到项目目录。然后在HTML文件中通过`<script>`标签引入，确保在使用图表的脚本之前加载...
它详细介绍了如何安装FusionCharts，设置图表的基本结构，以及如何在网页中嵌入图表。教程中还会涵盖各种图表类型（如柱状图、饼图、线图、散点图等）的创建方法，以及如何配置图表属性，实现个性化展示。此外，教程...
在JSP中使用FusionCharts，你需要完成以下步骤： 1. **引入FusionCharts库**: 首先，要在JSP页面中使用FusionCharts，需要将FusionCharts的JavaScript文件引入到HTML头部。这可以通过添加`<script>`标签来实现，...
在本文中，我们将深入探讨FusionCharts 3.2版本，特别是其图像和PDF导出功能，以及如何在Java环境下进行配置。 **一、必要的FusionCharts文件** 1. **图形SWF文件**：这些是用于呈现不同类型的图表（例如Pie2D.swf...
4. **JSP**：在Java环境中，JSP开发者可以通过FusionCharts的Java类库，结合Servlet或JSP页面来生成图表数据。 **三、图表类型及特性** 1. **多样化图表**：FusionCharts支持20+种不同类型的图表，满足各种数据分析...
1. **引入库**：首先，你需要在项目中添加FusionCharts的Java库依赖，这通常通过Maven或Gradle等构建工具完成。 2. **创建图表对象**：使用FusionCharts的Java类，创建图表对象并设置基本属性，如图表类型、宽度、...
在"**FusionCharts_Evaluation**"中，我们可以预见到这是一份关于FusionCharts的评估或试用版，可能包含了该工具的各种功能演示、使用教程、示例代码和文档资源。通过这个压缩包，用户可以深入了解FusionCharts的...
例如，你可以使用FusionCharts的PHP、Java、.NET等服务器端库来生成图表的SVG或Flash代码，再通过Ajax请求获取这些代码，最后在ExtJS的组件中显示。 在实际应用中，我们还需要关注以下几点： - **数据源的处理**：...
总的来说，这篇博客可能涵盖了如何在Java后端使用Xstream库生成适合FusionCharts的XML数据，并在前端展示图表的全过程。这对于那些希望集成Java后端和FusionCharts的开发者来说，是一个宝贵的学习资源。
9. **集成进现有系统**：讲解如何将FusionCharts集成到常见的Web框架和开发环境中，如PHP、ASP.NET、Java等，以及如何与后端数据库进行交互。 10. **故障排查与社区支持**：提供常见问题的解决策略，介绍...
对于Java开发者，指南还可能涵盖如何在Java环境中集成FusionCharts，这涉及到服务器端的数据处理和渲染。例如，你可以使用FusionCharts Java API将图表嵌入到Servlet或JSP中。 总的来说，《FusionCharts Free中文...