一.最近要做fusioncharts方面的东西，以前没接触过，所以就粗略的了解了一下。把我觉得不错的写下来。做完项目会继续完善和深入。毕竟现在只是个热身。首先说说怎么直接在html里面引入报表吧。
fusioncharts 没多大，在FusionChartsFree>Charts里面方有swf文件。就是我们要创建报表的类似模板flash吧。要创建哪个就引入哪个，然后需要准备数据，数据是xml特定格式的。这个必须按规范来。其格式如下：
1<graph caption='每月销售额柱形图' xAxisName='月份' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'>
2 <set name='一月' value='462' color='AFD8F8' />
3 <set name='二月' value='857' color='F6BD0F' />
4 <set name='三月' value='671' color='8BBA00' />
5 <set name='四月' value='494' color='FF8E46' />
6 <set name='五月' value='761' color='008E8E' />
7 <set name='六月' value='960' color='D64646' />
8 <set name='七月' value='629' color='8E468E' />
9 <set name='八月' value='622' color='588526' />
10 <set name='九月' value='376' color='B3AA00' />
11 <set name='十月' value='494' color='008ED6' />
12 <set name='十一月' value='761' color='9D080D' />
13 <set name='十二月' value='960' color='A186BE' />
14</graph>
上面的代码里，有一个叫<graph>的root元素，它还有一些属性，用来定义标题，坐标轴，数值格式。我们还看到有很多<set>元素，它用来描述数据。name属性用来表示月份名称，value属性表示销售额，color属性表示图形颜色。
然后创建html：
<html>
<head>
<title>My First FusionCharts</title>
</head>
<body bgcolor="#ffffff">
</body>
</html>
movie指定我们的swf文件，FlashVars参数值用来指定XML文件的路径以及图形的宽和高。
现在打开html就可以看到一个3D的柱状图了。如果没有显示就看看是不是数据的格式不对，或者是引入路径和swf路径的问题。如果都对了那么可能是浏览器没有设置或安装flash。
二.上面讲的是用html直接来做的， 实际上，我们还可以使用FCF提供的一个JavaScript类来加载图形。使用JavaScript的方式有几个好处，一是代码量大大减少，特别是当一个页面上有几个图形时。二是代码更加直观。三是可以避免IE出现“单击以激活使用这个控件”的提示。
下面是html 代码：
<html>
<head>
<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>
</head>
<body bgcolor="#ffffff">
图形将出现这个DIV里，到时这里的字将被图形替代。
<script type="text/javascript">
var myChart = new FusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId", "600", "500");
myChart.setDataURL("Data.xml");
myChart.render("chartdiv");
</script>
</body>
</html>
<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>
然后，我们定义了一个DIV，它还有个id。
图形将出现这个DIV里，到时这里的字将被图形替代。
我们的图形就出现在这个DIV里。
接着，我们用四个参数建立了一个FusionCharts对象，
var myChart = new FusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId", "600", "500");
第一个参数是SWF文件的地址。
第二个是图形的id。这个id你可以随便叫什么，但是要注意，在后面我们讲到一个页面里有多个图形的时候，这个id一定要是唯一的。
第三个参数是图形的宽。
第四个参数是图形的高。
我们还要设置数据文件的地址。
myChart.setDataURL("Data.xml");
最后，我们把图形渲染在指定的地方。
myChart.render("chartdiv");
"chartdiv"就是前面的DIV的id，这就表示把图形render到"chartdiv"。
现在你运行JSChart.html，你会看到同Chart.html一样的效果。很显然使用JavaScript加载图形，更方便，更直观。
如果一个页面有多个表怎么办？其实很简单：
<html>
<head><title>多图形</title>
<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>
</head>
<body bgcolor="#ffffff">
First Chart Container Pie 3D
<script type="text/javascript">
var myChart1 = new FusionCharts("../FusionCharts/FCF_pie3D.swf", "myChartId1", "600", "400");
myChart1.setDataURL("Data.xml");
myChart1.render("chartdiv1");
</script>
Second Chart Container Column 3D
<script type="text/javascript">
var myChart2 = new FusionCharts("../FusionCharts/FCF_Column3D.swf","myChartId2", "600","300");
myChart2.setDataURL("Data.xml");
myChart2.render("chartdiv2");
</script>
Third Chart Container Line 2D
<script type="text/javascript">
var myChart3 = new FusionCharts("../FusionCharts/FCF_line.swf", "myChartId3", "600", "300");
myChart3.setDataURL("Data.xml");
myChart3.render("chartdiv3");
</script>
Fourth Chart Container Area 2D
<script type="text/javascript">
var myChart4 = new FusionCharts("../FusionCharts/FCF_area2D.swf", "myChartId4", "400", "250");
myChart4.setDataURL("Data.xml");
myChart4.render("chartdiv4");
</script>
</body>
</html>
这里不同的就是 ： 加载的swf 、 div 的id和FusionCharts对象的名称。
如果要把柱状图换成饼状图或者其他的数据格式不用变化，引入相应的swf就行，是不是非常方便。这只是个人理解的有不对的还望指出一起学习。
分享到：
相关推荐
FusionCharts是一款强大的JavaScript图表库，它允许开发者创建交互式且富有视觉吸引力的数据可视化图表。在Web应用中，数据图表的展示是传达信息、分析数据和做出决策的关键工具。FusionCharts支持多种图表类型，...
FusionCharts是一款强大的数据可视化工具，专为生成交互式、动画丰富的...通过阅读这份文档，无论是初学者还是有经验的开发者，都能够掌握FusionCharts的使用方法，从而高效地创建出具有吸引力的报表和数据展示界面。
1. **FusionCharts库**：FusionCharts的核心库文件，如`FusionCharts.swf`，这是Flash图表渲染的基础，负责处理数据和呈现图表。 2. **图表类型文件**：FusionCharts支持多种图表类型，如柱状图、线图、饼图等，每个...
**FusionCharts 图形报表展示** FusionCharts是一款强大的JavaScript图表库，专为网页和应用程序提供...通过熟练掌握FusionCharts的使用，你可以轻松地将复杂数据转化为直观的图形报表，提升数据分析和展示的效果。
1. **图表类型**：FusionCharts支持超过90种不同类型的图表，包括线图、柱状图、饼图、仪表盘、地图等，覆盖了数据分析的各个领域，满足各种业务需求。 2. **数据源**：FusionCharts支持多种数据源，包括XML、JSON...
### FusionCharts展示报表方法的步骤及例子 #### 一、FusionCharts简介 FusionCharts是一款功能强大的报表开发工具，可以免费使用，并且能够帮助我们完成所需的大部分报表展示任务。它支持多种图表类型，包括柱状...
### Fusioncharts+报表工具知识点详解 #### 一、Fusioncharts简介 Fusioncharts是一款功能强大的图表组件，它基于Flash技术构建，能够为用户提供高度动态且具有交互性的图表展示方式。这一工具支持多种编程语言...
1. **FusionCharts.js**：这是FusionCharts的核心JavaScript库，负责与SWF对象进行通信，解析JSON或XML数据，以及在网页上渲染图表。它支持多种浏览器和平台，确保了跨平台的兼容性。开发者可以利用这个库轻松地将...
标题中的"FusionCharts 多报表"指的是使用FusionCharts库实现的一个功能，即在一个Web页面上展示多个数据报表。FusionCharts是一款强大的JavaScript图表库，它提供了丰富的图表类型和高度的自定义选项，用于创建交互...
1. **多样化图表类型**：FusionCharts支持超过90种不同类型的图表，如条形图、饼图、线图、散点图、热力图等，满足各种数据可视化需求。 2. **交互性**：提供的图表具有高度交互性，用户可以通过鼠标悬停、点击等...
FusionCharts是一款强大的数据可视化工具，它以交互式的图表和图形呈现数据，广泛应用于Web应用程序...通过深入学习和实践，开发者能够利用FusionCharts创建出专业且富有洞察力的数据报表，提升业务决策的效率和质量。
1. **图表类型**: FusionCharts支持多种图表类型，如柱状图、折线图、饼图、散点图、热力图、甘特图等，覆盖了数据分析的各个领域。这些图表不仅视觉效果出众，还支持自定义样式和颜色，以适应不同的设计需求。 2. ...
FusionCharts是一款强大的图表库，专门用于创建交互式的统计报表。本文将深入探讨FusionCharts的使用，包括其核心特性、功能、以及如何在项目中集成和应用。 首先，FusionCharts是一个JavaScript库，它提供了一系列...
在"完整FusionCharts各种图形报表资源下载"中，我们可以找到FusionCharts支持的各种图表类型及其相关资源。 FusionCharts提供了多种图表类型，包括但不限于： 1. 折线图（Line Charts）：用于展示连续性数据的变化...
FusionCharts Free V2.1是一款专为网页开发者设计的免费Flash图形报表工具，它能够帮助用户轻松创建出美观、互动且数据丰富的图表。这款软件以其出色的数据可视化能力，为网站和应用程序添加了动态和直观的展示效果...
【FusionCharts报表展示...总之，FusionCharts通过简单易用的HTML嵌入方法和灵活的XML数据结构，使得创建和展示报表变得非常便捷。无论是静态数据展示还是动态数据更新，FusionCharts都能提供高效且直观的解决方案。
总结，FusionCharts报表工具凭借其丰富的图表类型、强大的数据处理能力、优秀的交互体验和广泛的兼容性，成为开发人员在数据可视化领域的重要选择。无论是在企业内部的数据分析，还是对外展示数据的Web应用，...
**FusionCharts报表图形实例详解** 在现代的Web开发中，数据可视化扮演着至关重要的角色。FusionCharts是一款强大的图表库，它结合了JavaScript和Flash技术，为JAVA Web应用程序提供了丰富的图形解决方案。本实例...
本项目“java做数据报表源代码”聚焦于利用Java技术来处理和展示数据，特别是通过FusionCharts包来创建动态图表。 首先，我们来探讨Java在数据报表中的应用。Java可以通过各种方式处理数据，如JDBC（Java Database ...
FusionCharts是一款强大的数据可视化工具，专为生成交互式、丰富的图表和报表而设计。它在IT行业中广泛应用于数据分析、业务报告、项目监控等场景，为用户提供直观且易于理解的数据展示方式。以下是对FusionCharts...