使用js加载图像和setDataXML()加载数据
使用js加载图像和setDataXML()加载数据
前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<EMBED>标记来加载图形的,但是这样做是非常不“理智”的。这样做除了代码量比较大外,还有并不是所有的人能够看懂上面的代码。但是使用JS后就可以避免上面几个问题了。
一、使用JS加载FusionCharts图形
下面就分五个步骤讲解如何使用js来加载FusionCharts图形。
第一步:导入FusionCharts.js文件
1
|
<font size= "3" ><script language= "JavaScript" src= "../FusionCharts/FusionCharts.js" ></script></font> |
第二步:定义一个DIV,它必须具备一个元素:id
1
|
< div id = "chartdiv_01" align = "center" ></ div > |
第三步:建立一个FusionCharts对象
1
|
var myChart = new FusionCharts( "para1" , "para2" , "para3" , "para4" ); |
Para1:表示的是SWF文件的地址
Para2:该图形的ID,这个可以随便命名,但是需要保证它的唯一性
para3:图形的高度。
Para4:图形的长度。
1
|
var myChart = new FusionCharts( "../FusionCharts/Doughnut3D.swf" , "myChartId_02" , "600" , "500" ); |
第四步:设置数据文件
1
|
myChart.setDataURL( "Data.xml" ); |
第五步:指定图形渲染的位置。
1
|
myChart.render( "chartdiv_01" ); |
通过上面五个步骤就是完成js加载FusionCharts图形。如果需要加载多个图形,只需要重复第二步—第五步,但是需要确保DIV和FusionCharts对象的id的唯一性。如:
1
2
3
4
5
|
<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字符串。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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()来进行编码。
使用js加载图像和setDataXML()加载数据的更多相关文章
- FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据
前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<EMBED>标记来加载图形的,但是这 ...
- canvas加载图像
之前按照例子,加载图像,发现加载图像,加载不上去,代码也没有错误,经过几次的尝试:发现需要重复调用下drawImage才可以. <script type="text/javascrip ...
- JS怎样实现图片的懒加载以及jquery.lazyload.js的使用
在项目中有时候会用到图片的延迟加载,那么延迟加载的好处是啥呢? 我觉得主要包括两点吧,第一是在包含很多大图片长页面中延迟加载图片可以加快页面加载速度:第二是帮助降低服务器负担. 下面介绍一下常用的延迟 ...
- js实现类型jq的dom加载完成
有时候我们只想在 dom 加载完成后运行 js ,而不是等所有图片加载完成.所以不需要 onload , onload 会加载图片等其他媒体.很消耗时间. 原:http://blog.csdn.net ...
- angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js
用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此: 问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所 ...
- win7,vs2010,asp.net项目中修改外部js文件,在调试时加载的还是旧文件
win7,vs2010,asp.net项目中修改外部js文件,在调试时加载的还是旧文件 我杀过 w3wp.exe和asp.net_state的进程,重启 iis admin的服务,都还是不行. 只是把 ...
- Android异步加载图像(含线程池,缓存方法)
研究了android从网络上异步加载图像: (1)由于android UI更新支持单一线程原则,所以从网络上取数据并更新到界面上,为了不阻塞主线程首先可能会想到以下方法. 在主线程中new 一个Han ...
- Android 多种方式正确的加载图像,有效避免oom
图像加载的方式: Android开发中消耗内存较多一般都是在图像上面,本文就主要介绍怎样正确的展现图像减少对内存的开销,有效的避免oom现象.首先我们知道我的获取图像的来源一般有三种源头:1.从网络加 ...
- 转: Android异步加载图像小结
转:http://blog.csdn.net/sgl870927/article/details/6285535 研究了android从网络上异步加载图像,现总结如下: (1)由于android UI ...
随机推荐
- 如此高效通用的分页存储过程是带有sql注入漏洞的
原文:如此高效通用的分页存储过程是带有sql注入漏洞的 在google中搜索“分页存储过程”会出来好多结果,是大家常用的分页存储过程,今天我却要说它是有漏洞的,而且漏洞无法通过修改存储过程进行补救,如 ...
- .net cookie
HttpCookie HttpRequest HttpResponse 这3个 类 . 之间的关系 . 请求 ,相应 都有一个 public HttpCookieCollection Cooki ...
- A WebBrowser Toy
原文:A WebBrowser Toy 记得上大学时,某老师为了防止学生上课不听讲,只准学生在课堂上看他放映的PPT,不准学生拷贝,而考试的内容恰恰是PPT上的内容,于是一个同学来找我,我就用VB写了 ...
- youcompleteme install and configure
三四年前我配置vim插件的时候还都是手动配置,还没有听说vundle这个vim插件管理工具,现在配置vim插件的时候基本上都用vundle,这个插件也确实是方便快捷,只不过这东西时能话了就不清楚里面的 ...
- 客户端程序通过TCP通信传送"小文件"到服务器
客户端程序通过TCP通信传送"小文件"到服务器 [c#源码分享]客户端程序通过TCP通信传送"小文件"到服务器 源码 (不包含通信框架源码,通信框架源码请另行 ...
- Mac OS下SVN的使用:服务的和客户端
在Windows环境中,我们一般使用TortoiseSVN来搭建svn环境.在Mac环境下,由于Mac自带了svn的服务器端和客户端功能,所以我们可以在不装任何第三方软件的前提下使用svn功能,不过还 ...
- MVC5+EF6 入门
MVC5+EF6 入门完整教程九 前一阵子临时有事,这篇文章发布间隔比较长,我们先回顾下之前的内容,每篇文章用一句话总结重点. 文章一 MVC核心概念简介,一个基本MVC项目结构 文章二 通过开发 ...
- 在windows下用C语言写socket通讯实例
原文:在windows下用C语言写socket通讯实例 From:Microsoft Dev Center #undef UNICODE #define WIN32_LEAN_AND_MEAN #in ...
- dom01
事件冒泡:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). 事件捕获:即不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件. ...
- 关于PHP的工作流引擎
关于PHP的工作流引擎,除了三大主流开源:PorcessMaker(排名第一,因其有拖放式图形定义界面),RadiCore(基于PETRI NET)和CuteFlow以外,另外还有一个不为人知的,但却 ...