一.最近要做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通过简单易用的HTML嵌入方法和灵活的XML数据结构,使得创建和展示报表变得非常便捷。无论是静态数据展示还是动态数据更新,FusionCharts都能提供高效且直观的解决方案。
在"完整FusionCharts各种图形报表资源下载"中,我们可以找到FusionCharts支持的各种图表类型及其相关资源。 FusionCharts提供了多种图表类型,包括但不限于: 1. 折线图(Line Charts):用于展示连续性数据的变化...
FusionCharts Free V2.1是一款专为网页开发者设计的免费Flash图形报表工具,它能够帮助用户轻松创建出美观、互动且数据丰富的图表。这款软件以其出色的数据可视化能力,为网站和应用程序添加了动态和直观的展示效果...
总结,FusionCharts报表工具凭借其丰富的图表类型、强大的数据处理能力、优秀的交互体验和广泛的兼容性,成为开发人员在数据可视化领域的重要选择。无论是在企业内部的数据分析,还是对外展示数据的Web应用,...
**FusionCharts报表图形实例详解** 在现代的Web开发中,数据可视化扮演着至关重要的角色。FusionCharts是一款强大的图表库,它结合了JavaScript和Flash技术,为JAVA Web应用程序提供了丰富的图形解决方案。本实例...
本项目“java做数据报表源代码”聚焦于利用Java技术来处理和展示数据,特别是通过FusionCharts包来创建动态图表。 首先,我们来探讨Java在数据报表中的应用。Java可以通过各种方式处理数据,如JDBC(Java Database ...
FusionCharts是一款强大的数据可视化工具,专为生成交互式、丰富的图表和报表而设计。它在IT行业中广泛应用于数据分析、业务报告、项目监控等场景,为用户提供直观且易于理解的数据展示方式。以下是对FusionCharts...