`
yangsongjing
  • 浏览: 248521 次
  • 性别: Icon_minigender_1
  • 来自: 湖南
社区版块
存档分类
最新评论

fusioncharts 数据报表 (1)

阅读更多
  一.最近要做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就行,是不是非常方便。这只是个人理解的有不对的还望指出一起学习。
1
1
分享到:
评论
1 楼 08284008 2012-11-27  
lz使用的fusionchart是哪个版本的??怎么和我使用的不一样??
引用
有一个叫<graph>的root元素
;我使用的根元素是<chart>

相关推荐

    利用FusionCharts 实现数据图表展示

    FusionCharts是一款强大的JavaScript图表库,它允许开发者创建交互式且富有视觉吸引力的数据可视化图表。在Web应用中,数据图表的展示是传达信息、分析数据和做出决策的关键工具。FusionCharts支持多种图表类型,...

    fusioncharts+报表工具(文档)

    FusionCharts是一款强大的数据可视化工具,专为生成交互式、动画丰富的...通过阅读这份文档,无论是初学者还是有经验的开发者,都能够掌握FusionCharts的使用方法,从而高效地创建出具有吸引力的报表和数据展示界面。

    FusionCharts flash报表所需完整文件

    1. **FusionCharts库**:FusionCharts的核心库文件,如`FusionCharts.swf`,这是Flash图表渲染的基础,负责处理数据和呈现图表。 2. **图表类型文件**:FusionCharts支持多种图表类型,如柱状图、线图、饼图等,每个...

    FusionCharts 图形报表展示

    **FusionCharts 图形报表展示** FusionCharts是一款强大的JavaScript图表库,专为网页和应用程序提供...通过熟练掌握FusionCharts的使用,你可以轻松地将复杂数据转化为直观的图形报表,提升数据分析和展示的效果。

    Fusioncharts 报表

    1. **图表类型**:FusionCharts支持超过90种不同类型的图表,包括线图、柱状图、饼图、仪表盘、地图等,覆盖了数据分析的各个领域,满足各种业务需求。 2. **数据源**:FusionCharts支持多种数据源,包括XML、JSON...

    FusionCharts展示报表方法的步骤及例子

    ### FusionCharts展示报表方法的步骤及例子 #### 一、FusionCharts简介 FusionCharts是一款功能强大的报表开发工具,可以免费使用,并且能够帮助我们完成所需的大部分报表展示任务。它支持多种图表类型,包括柱状...

    fusioncharts+报表工具

    ### Fusioncharts+报表工具知识点详解 #### 一、Fusioncharts简介 Fusioncharts是一款功能强大的图表组件,它基于Flash技术构建,能够为用户提供高度动态且具有交互性的图表展示方式。这一工具支持多种编程语言...

    FusionCharts报表工具及例子

    1. **FusionCharts.js**:这是FusionCharts的核心JavaScript库,负责与SWF对象进行通信,解析JSON或XML数据,以及在网页上渲染图表。它支持多种浏览器和平台,确保了跨平台的兼容性。开发者可以利用这个库轻松地将...

    fusioncharts 多报表

    标题中的"FusionCharts 多报表"指的是使用FusionCharts库实现的一个功能,即在一个Web页面上展示多个数据报表。FusionCharts是一款强大的JavaScript图表库,它提供了丰富的图表类型和高度的自定义选项,用于创建交互...

    FusionCharts图形报表工具正式版

    1. **多样化图表类型**:FusionCharts支持超过90种不同类型的图表,如条形图、饼图、线图、散点图、热力图等,满足各种数据可视化需求。 2. **交互性**:提供的图表具有高度交互性,用户可以通过鼠标悬停、点击等...

    Fusioncharts报表工具帮助.rar

    FusionCharts是一款强大的数据可视化工具,它以交互式的图表和图形呈现数据,广泛应用于Web应用程序...通过深入学习和实践,开发者能够利用FusionCharts创建出专业且富有洞察力的数据报表,提升业务决策的效率和质量。

    FusionCharts_Evaluation报表工具

    1. **图表类型**: FusionCharts支持多种图表类型,如柱状图、折线图、饼图、散点图、热力图、甘特图等,覆盖了数据分析的各个领域。这些图表不仅视觉效果出众,还支持自定义样式和颜色,以适应不同的设计需求。 2. ...

    FusionCharts统计报表的详细总结

    FusionCharts是一款强大的图表库,专门用于创建交互式的统计报表。本文将深入探讨FusionCharts的使用,包括其核心特性、功能、以及如何在项目中集成和应用。 首先,FusionCharts是一个JavaScript库,它提供了一系列...

    fusioncharts展示报表

    【FusionCharts报表展示...总之,FusionCharts通过简单易用的HTML嵌入方法和灵活的XML数据结构,使得创建和展示报表变得非常便捷。无论是静态数据展示还是动态数据更新,FusionCharts都能提供高效且直观的解决方案。

    完整FusionCharts各种图形报表资源下载

    在"完整FusionCharts各种图形报表资源下载"中,我们可以找到FusionCharts支持的各种图表类型及其相关资源。 FusionCharts提供了多种图表类型,包括但不限于: 1. 折线图(Line Charts):用于展示连续性数据的变化...

    免费漂亮的Flash图形报表-FusionCharts Free V2.1

    FusionCharts Free V2.1是一款专为网页开发者设计的免费Flash图形报表工具,它能够帮助用户轻松创建出美观、互动且数据丰富的图表。这款软件以其出色的数据可视化能力,为网站和应用程序添加了动态和直观的展示效果...

    FusionCharts报表

    总结,FusionCharts报表工具凭借其丰富的图表类型、强大的数据处理能力、优秀的交互体验和广泛的兼容性,成为开发人员在数据可视化领域的重要选择。无论是在企业内部的数据分析,还是对外展示数据的Web应用,...

    FusionCharts报表 图形实例

    **FusionCharts报表图形实例详解** 在现代的Web开发中,数据可视化扮演着至关重要的角色。FusionCharts是一款强大的图表库,它结合了JavaScript和Flash技术,为JAVA Web应用程序提供了丰富的图形解决方案。本实例...

    java做数据报表源代码

    本项目“java做数据报表源代码”聚焦于利用Java技术来处理和展示数据,特别是通过FusionCharts包来创建动态图表。 首先,我们来探讨Java在数据报表中的应用。Java可以通过各种方式处理数据,如JDBC(Java Database ...

    fusionCharts报表

    FusionCharts是一款强大的数据可视化工具,专为生成交互式、丰富的图表和报表而设计。它在IT行业中广泛应用于数据分析、业务报告、项目监控等场景,为用户提供直观且易于理解的数据展示方式。以下是对FusionCharts...

Global site tag (gtag.js) - Google Analytics