`
wbj0110
  • 浏览: 1604128 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

FusionCharts简单教程-使用js加载图像和setDataXML()加载数据 .

阅读更多

一、使用JS加载FusionCharts图形                                                                         

      下面就分五个步骤讲解如何使用js来加载FusionCharts图形。

      第一步:导入FusionCharts.js文件

 

[javascript] view plaincopyprint?
  1. <script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>  
<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>


      第二步:定义一个DIV,它必须具备一个元素:id

 

 

[javascript] view plaincopyprint?
  1. <div id="chartdiv_01" align="center"></div>  
<div id="chartdiv_01" align="center"></div>


      第三步:建立一个FusionCharts对象

 

 

[javascript] view plaincopyprint?
  1. var myChart = new FusionCharts("para1""para2""para3""para4");    
 var myChart = new FusionCharts("para1", "para2", "para3", "para4");  

 

      Para1:表示的是SWF文件的地址

      Para2:该图形的ID,这个可以随便命名,但是需要保证它的唯一性
      para3:图形的高度。

      Para4:图形的长度。

 

[javascript] view plaincopyprint?
  1. var myChart = new FusionCharts("../FusionCharts/Doughnut3D.swf""myChartId_02""600""500");  
 var myChart = new FusionCharts("../FusionCharts/Doughnut3D.swf", "myChartId_02", "600", "500");


      第四步:设置数据文件

 

 

[javascript] view plaincopyprint?
  1. myChart.setDataURL("Data.xml");  
myChart.setDataURL("Data.xml");


      第五步:指定图形渲染的位置。

 

 

[javascript] view plaincopyprint?
  1. myChart.render("chartdiv_01");  
myChart.render("chartdiv_01");


      通过上面五个步骤就是完成js加载FusionCharts图形。如果需要加载多个图形,只需要重复第二步—第五步,但是需要确保DIV和FusionCharts对象的id的唯一性。如:

 

 

[javascript] view plaincopyprint?
  1.            <div id="chartdiv_02" align="center"></div>  
  2. <script type="text/javascript">     
  3.        var myChart = new FusionCharts("../FusionCharts/Doughnut3D.swf""myChartId_02""600""500");      
  4. myChart.setDataURL("Data.xml");      
  5. myChart.render("chartdiv_02");  
             <div id="chartdiv_02" align="center"></div>
		<script type="text/javascript">   
	        var myChart = new FusionCharts("../FusionCharts/Doughnut3D.swf", "myChartId_02", "600", "500");    
		myChart.setDataURL("Data.xml");    
		myChart.render("chartdiv_02");



 

      二、使用dataXML加载数据                                                                                     

      前面所讲的xml数据文件都是一个单独的xml文件,这个文件可能会被一个或者多个程序使用,同时这个文件也是静态的。但是我们在实际需求中可能不许哟啊单独的文件且数据是动态的,这时我们就可以使用dataXML方法来进行调用。注:dataURL也可以使用动态的数据文件。

      dataXML和dataURL都可以提供数据,只不过dataURL是将数据文件以URL地址的形式,而dataXML则是以XML文本的形式。说的直白点就是dataURL将xml文件的地址告知FCF,而dataXML是将XML数据文件里的内容告知FCF。

      下面的实例是使用dataXML加载数据文件。其中setDataXML()方面的参数是一个完整的XML字符串。

 

[javascript] view plaincopyprint?
  1. myChart.setDataURL(<graph caption='每月销售额柱形图' xAxisName='月份' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'>  
  2.     <set name='一月' value='100' color='AFD8F8' />  
  3.     <set name='二月' value='200' color='F6BD0F' />  
  4.     <set name='三月' value='300' color='8BBA00' />  
  5.     <set name='四月' value='120' color='FF8E46' />  
  6.     <set name='五月' value='220' color='008E8E' />  
  7.     <set name='六月' value='330' color='D64646' />  
  8.     <set name='七月' value='210' color='8E468E' />  
  9.     <set name='八月' value='544' color='588526' />  
  10.     <set name='九月' value='565' color='B3AA00' />  
  11.     <set name='十月' value='754' color='008ED6' />  
  12.     <set name='十一月' value='441' color='9D080D' />  
  13.     <set name='十二月' value='654' color='A186BE' />  
  14. </graph>");   
myChart.setDataURL(<graph caption='每月销售额柱形图' xAxisName='月份' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'>
	<set name='一月' value='100' color='AFD8F8' />
	<set name='二月' value='200' color='F6BD0F' />
	<set name='三月' value='300' color='8BBA00' />
	<set name='四月' value='120' color='FF8E46' />
	<set name='五月' value='220' color='008E8E' />
	<set name='六月' value='330' color='D64646' />
	<set name='七月' value='210' color='8E468E' />
	<set name='八月' value='544' color='588526' />
	<set name='九月' value='565' color='B3AA00' />
	<set name='十月' value='754' color='008ED6' />
	<set name='十一月' value='441' color='9D080D' />
	<set name='十二月' value='654' color='A186BE' />
</graph>"); 



 

三、setDataXML()的问题                                                                                            

      我们知道浏览器对参数的获取一般都有一个长度的限制,如果XML字符串数据过大,可能会导致问题,貌似下钻到时候如果有中文会出现问题(在这次项目中,下钻中文总是传递不过去,不知道各位有没有遇到过这样的问题,求解!!)。

      所以在实际的应用中一般都是推荐这种方式:setDataURL()方法,使用javascript来加载图形。不过在使用setDataURL时,如果地址里面包含有”?”、”&”等字符时,需要进行转码操作。对于java而言推荐使用URLEncoder.encode()来进行编码。

分享到:
评论

相关推荐

    fusioncharts-suite-xt3.10.1.zip

    FusionCharts Suite XT 3.10.1是一个强大的JavaScript图表库,通过"fusioncharts-suite-xt3.10.1.zip"压缩包提供的组件,开发者可以轻松实现数据可视化,提供丰富的交互体验,并且能够灵活地进行数据导入和导出。

    fusioncharts-suite-xt-v3.9.0

    [JavaScript版]fusioncharts-suite-xt-v3.9.0,支持各种浏览器(最低IE8)。无水印。完美。包含全量地图数据fusionmaps-xt-definition.zip。

    fusioncharts/3.3.1下载

    FusionCharts是一种制图组件,可以帮您为您的Web应用创建交互式的、数据驱动的... FusionCharts的JavaScript类现在包括四个主要文件:FusionCharts.js, FusionCharts.HC.js, FusionCharts.HC.Charts.js和jquery.min.js。

    FusionCharts_Evaluation-free.zip

    FusionCharts是一款强大的JavaScript图表库,它用于在Web应用程序中创建互动、丰富的数据可视化效果。这个"FusionCharts_Evaluation-free.zip"压缩包很可能是FusionCharts的试用版或者免费版,包含了一些基本的图表...

    fusioncharts-suite-xt-v3.12.1 破解版

    官方最新Fusioncharts 3.12.2,图表上无水印。支持最新的HTML5,跨平台。PCs, Macs, iPads, iPhones, Android devices, our JavaScript (HTML5) charts work everywhere. Heck, even on IE 6

    fusioncharts-suite-xt.zip

    FusionCharts Suite XT是一款强大的JavaScript图表库,它提供了丰富的图表类型和精美的视觉效果,能够帮助开发者轻松地创建交互式和动态的数据可视化应用。该软件包名为“fusioncharts-suite-xt.zip”,包含了一系列...

    FusionCharts---v3.1破解版(49个swf).rar

    FusionCharts---v3.1破解版(49个swf).rar

    fusioncharts-suite-xt

    综上所述,FusionCharts Suite XT 3.6.0是一个强大且灵活的可视化工具,它的易用性和丰富特性使得数据可视化变得更加简单和高效。无论你是开发者还是数据爱好者,这个版本都将是你构建数据驱动应用的理想选择。

    FusionCharts.js

    **FusionCharts.js** 是一款强大的前端绘图库,它为开发者提供了丰富的图表类型和功能,使得在网页中创建交互式、美观的数据可视化变得轻而易举。在本文中,我们将深入探讨FusionCharts.js的核心特性、使用方法以及...

    FusionCharts_Evaluation-统计图

    FusionCharts是一款强大的数据可视化工具,专用于创建各种交互式的...通过“FusionCharts_Evaluation-统计图”这个压缩包,你可以深入学习和实践如何使用FusionCharts,从而在项目中实现专业且吸引人的数据可视化效果。

    fusioncharts.dll文件

    标签"fusioncharts dll 文件"强调了这是FusionCharts组件的DLL形式,意味着它适用于那些需要在服务器端处理和传递数据到客户端进行图表渲染的场景。由于DLL文件通常与特定的编程语言或平台兼容,因此在使用...

    fusioncharts-suite-xt 版本version 3.4.1

    FusionCharts Suite XT 是一款强大的JavaScript图表库,用于在Web、移动设备以及应用程序中创建交互式的、富有视觉吸引力的统计报表和图形。该版本为3.4.1,提供了多种图表类型,支持丰富的数据可视化需求。 ...

    FusionCharts Blueprint Application - ColdFusion + MS Access / SQL / MySQL version

    通过理解并实践这个FusionCharts蓝图应用,开发者不仅可以掌握如何在ColdFusion中使用FusionCharts,还能了解到如何根据项目需求灵活选择和集成不同的数据库系统,从而构建出强大且美观的数据可视化应用。...

    fusioncharts 3.15.0-sr.1 去水印版.rar

    FusionCharts是一款流行的JavaScript图表库,它允许开发者创建交互式、动画丰富的数据可视化图表。这款3.15.0-sr.1版本是去水印版,意味着它移除了默认的FusionCharts水印,提供了更纯净的展示效果,特别适合用于...

    fusionCharts.js

    FusionCharts是InfoSoft Global公司的一个产品,InfoSoft Global 公司是专业的Flash图形方案提供商,他们还有几款其他的,基于Flash技术的产品,都非常的漂亮。...其中FusionCharts.js文件有函数setJSONData

    FusionCharts教程

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

    fusionCharts导出相关资料打包

    FusionCharts是一款强大的JavaScript图表库,它提供了丰富的图表类型和高度自定义的选项,用于创建交互式的、数据可视化效果。本压缩包中的“fusionCharts导出相关资料打包”集成了关于如何实现FusionCharts图表自动...

    angular-fusioncharts, 面向FusionCharts的Angular JS绑定.zip

    angular-fusioncharts, 面向FusionCharts的Angular JS绑定 #AngularJS 图表插件简单有效的AngularJS图表插件。###Details 使用这个AngularJS图表插件,只使用一个指令向你的网络和移动应用程序添加交互式图表。 从...

Global site tag (gtag.js) - Google Analytics