博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
新手学fusionCharts做图表
阅读量:4964 次
发布时间:2019-06-12

本文共 5891 字,大约阅读时间需要 19 分钟。

在web系统上嵌入图表的技术有很多,fusionCherts是其中一种优秀的技术,特别提一提,本人对fusionCharts学习,得益于以下博文:

该博文中有详细的fusionCharts教程,我这篇文章的目的只是对自己的学习做一个小结而已。

 

总的来说:用fusionCharts做图表无非就是做三件事:

第一:在展示页面(html,aspx等)找到一个展示图表的位子

第二:准备数据源,数据源必须是XML文件的格式

第三:初始化fusionCharts图表 ,把数据源引用到fusionCharts图表中 

     其中初始化fusionCharts图表要做的包括:

1、  初始化OBJECT和EMBED标签

2、  在< param>标签中初始化fusionCharts

      <param name="movie" value="../FusionCharts/Pie3D.swf" />  --导入报表样板图

<param name="FlashVars"  value="&dataURL=Data.xml&chartWidth=550&chartHeight=300"> --导入外部的XML文件数据源,或直接把数据源写在该<param>中

<param name="quality" value="high" />   --说明图表质量,一般是 name="quality" value="high"

----------------------

OBJECT和EMBED标签用法参考文

我们要在网页中正常显示flash内容,那么页面中必须要有指定flash路径的标签。也就是OBJECT和EMBED标签。OBJECT标签是用于windows平台的IE浏览器的,而EMBED是用于windows和Macintosh平台下的Netscape Navigator浏览器以及Macintosh平台下的IE浏览器。windows平台的IE利用Activex控件来播放flash而其它的浏览器则使用Netscape插件技术来播放flash。

下面是简单的网页中插入flash的代码示例:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
WIDTH="550" HEIGHT="400" >
<PARAM VALUE="myFlashMovie.swf">
<PARAM VALUE=high>
<PARAM VALUE=#FFFFFF>
<EMBED src="/support/flash/ts/documents/myFlashMovie.swf" quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400"
NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>

 

OBJECT标签是用于windows IE3.0及以后浏览器或者其它支持Activex控件的浏览器。“classid”和“codebase”属性必须要精确地按上例所示的写法写,它们告诉浏览器自动下载flash player的地址。如果你没有安装过flash player 那么IE3.0以后的浏览器会跳出一个提示框访问是否要自动安装flash player。当然,如果你不想让那些没有安装flash player的用户自动下载播放器,或许你可以省略掉这些代码。

EMBED标签是用于Netscape Navigator2.0及以后的浏览器或其它支持Netscape插件的浏览器。“pluginspage”属性告诉浏览器下载flash player的地址,如果还没有安装flash player的话,用户安装完后需要重启浏览器才能正常使用。

为了确保大多数浏览器能正常显示flash,你需要把EMBED标签嵌套放在OBJECT标签内,就如上面代码例子一样。支持Activex控件的浏览器将会忽略OBJECT标签内的EMBED标签。Netscape和使用插件的IE浏览器将只读取EMBED标签而不会识别OBJECT标签。也就是说,如果你省略了EMBED标签,那firefox就不能识别你的flash了。

本文列出了用于发布影片的OBJECT和EMBED标签的必要以及可选属性。

一、必需属性

·CLASSID-设置浏览器的Activex控件,仅用于OBJECT标签。

·CODEBASE-设置flash Activex控件的位置,因而如果浏览器如果没有安装的话,可以自动下载安装。仅用于OBJECT标签。
·WIDTH-以百分比或象素指定flash影片的宽度。
·HEIGHT-以百分比或象素指定flash影片的高度。
·SRC-指定影片的下载地址。仅用于EMBED标签。
·PLUGINSPAGE-设置flash 插件的位置,因而如果浏览器如果没有安装的话,可以自动下载安装。仅用于EMBED标签。
·MOVIE-指定影片的下载地址。仅用于OBJECT标签。

---------------------------

 

实例1:在html页面上展示fusionCharts图表

下载一个fusionCharts包,fusionCharts包中包括.swf文件,.js文件,和其他一些文件

把swf文件放到fusion报表的同一文件下,

创建fusion文件夹,在fusion文件夹下

1、创建Data.xml文件存放数据源

Data.xml文件包括两个标签

Chart标签说明是chart数据,并在chart属性中设置图表的相关属性值,比如标题,X轴,Y轴,Y轴前缀。

set标签,设置图表的具体数据的数据

Data.xml文件

<chart caption='Monthly sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sale' numberPrefix='$'>

    <set label='一月' value='17400'/>

    <set label='二月' value='17400'/>

    <set label='三月' value='20500'/>

    <set label='四月' value='24000'/>

    <set label='五月' value='26500'/>

    <set label='六月' value='30000'/>

    <set label='七月' value='32000'/>

    <set label='八月' value='17400'/>

<set label='九月' value='26500'/>

    <set label='十月' value='30000'/>

    <set label='十一月' value='32000'/>

    <set label='十二月' value='17400'/>     

</chart>

 

2、Html文件中,初始化chart并导入数据

<html>

<body bgcolor="#ffffff">

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"

codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="300" id="Pie3D">

<param name="movie" value="../FusionCharts/Pie3D.swf" />  --导入报表样板图

 

<param name="FlashVars" value="&dataURL=Data.xml&chartWidth=550&chartHeight=300"> --导入外部的XML文件数据源,或直接把数据源写在该<param>中

<param name="quality" value="high" />  --说明图表质量,一般是 name="quality" value="high"

<embed src="../FusionCharts/Pie3D.swf" flashVars="&dataURL=Data.xml&chartWidth=550&chartHeight=300" quality="high" width="550"

height="300" name="Pie3D"type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

</object>

</body>

</html>

 

有时候也直接把XML中的数据源写到html页面中,修改以上代码的dataURL

<param name="FlashVars" value="&dataXML=<chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'>

<set label='January' value='17400' />

<set label='February' value='19800' />

<set label='March' value='21800' />

<set label='April' value='23800' />

<set label='May' value='29600' />

<set label='June' value='27600' />

<set label='July' value='31800' />

<set label='August' value='39700' />

<set label='September' value='37800' />

<set label='October' value='21900' />

<set label='November' value='32900' />

<set label='December' value='39800' />

</chart>">

实例二:用js使用chart图表,js提供了FusionCharts类来操作fusion图表

在页面中只须简单几步就可以实现charts,

1、导入下载包中的FusionCharts.js包

2、在展示页面中写好一个DIV放置图表

3、在<script>中实例化FusionCharts对象的同时也初始化FusionCharts对象

4、用该对象提供的方法指向数据源和指向放置图表的div

数据源在Data.xml页面中

<html>

<head>

<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>

</head>

<body bgcolor="#ffffff">

<div id="chartdiv" align="center">The chart will appear within this DIV. This text will be replaced by the chart.</div>

<script type="text/javascript">

var myChart = new FusionCharts("../FusionCharts/Column3D.swf", "myChartId", "900", "300", "0", "0");

myChart.setDataURL("Data.xml");

myChart.render("chartdiv");

</script>

</body>

</html>

 

 

如果不是指向XML文件的话,可以直接写数据源,以字符串的形式写xml标签

 myChart.setDataXML("

<chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'>

<set label='January' value='17400' /><set label='February' value='19800' /><set label='March' value='21800' />

<set label='April' value='23800' /><set label='May' value='29600' /><set label='June' value='27600' />

<set label='July' value='31800' /><set label='August' value='39700' />

<set label='September' value='37800' /><set label='October' value='21900' />

<set label='November' value='32900' /><set label='December' value='39800' />

</chart>");

转载于:https://www.cnblogs.com/qingfengmuzhu/p/4103875.html

你可能感兴趣的文章
eclipse package,source folder,folder区别及相互转换
查看>>
Py 可能是最全面的 python 字符串拼接总结(带注释版)
查看>>
如何从亿量级中判断一个数是否存在?
查看>>
客户数据(类的调用)
查看>>
cookie session 和登录验证
查看>>
为mysql数据库建立索引
查看>>
语言-汉语-官话-中原官话-兖菏片:兖菏片
查看>>
HTML-参考手册: 画布
查看>>
杂项:MIS
查看>>
Node.js:全局对象
查看>>
6、python中的字符串
查看>>
String、StringBuffer与StringBuilder之间区别
查看>>
bash中常见环境变量env、set、export 、declare与bash漏洞原理
查看>>
Vue.js 子组件的异步加载及其生命周期控制
查看>>
数据库表结构导出sql语句
查看>>
C++库(Thrift)
查看>>
第十五周助教小结
查看>>
P2260 [清华集训2012]模积和
查看>>
MD5加密工具类
查看>>
linux less命令详情
查看>>