2010.03.10(2)——FusionChartsFree的简单用法

最新推荐文章于 2021-03-19 05:23:26 发布

cody123

最新推荐文章于 2021-03-19 05:23:26 发布

阅读量389

点赞数

文章标签： XML Flash 浏览器 IE JavaScript ViewUI

2010.03.10(2)——FusionChartsFree的简单用法

参考：http://bbs.cnw.com.cn/viewthread.php?tid=159992

[b]第一步：创建一个XML数据文档[/b]

first.xml

<graph caption='每月销售额柱状图' xAxisName='月' yAxisName='Units' decimalPrecision='0' formatNumberScale='0'>
    <set name='一月' value='462' color='AFD8F8' />
    <set name='二月' value='857' color='F6BD0F' />
    <set name='三月' value='671' color='8BBA00' />
    <set name='四月' value='494' color='FF8E46' />
    <set name='五月' value='761' color='008E8E' />
    <set name='六月' value='960' color='D64646' />
    <set name='七月' value='629' color='8E468E' />
    <set name='八月' value='622' color='588526' />
    <set name='九月' value='376' color='B3AA00' />
    <set name='十月' value='494' color='008ED6' />
    <set name='十一月' value='761' color='9D080D' />
    <set name='十二月' value='960' color='A186BE' />
</graph>

[b]第二步：创建包含图形的HTML文件[/b]
===============================================================
1.用flash标签<object></object>

<html>
  <head>
    <title>My First </title>
  </head>

  <body bgcolor="#ffffff">　　
　　　　　 <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="600" height="500" id="Column3D" >　　
　　　　　　　　 <param name="movie" value="FusionCharts/FCF_Column3D.swf" />　　
　　　　　　　　 <param name="FlashVars" value="&dataURL=xml/first.xml&chartWidth=600&chartHeight=500">　　
　　　　　　　　 <param name="quality" value="high" />　　
　　　　　　　　 <embed src="FusionCharts/FCF_Column3D.swf" flashVars="&dataURL=xml/first.xml&chartWidth=600&chartHeight=500" quality="high" width="600" height="500" name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />　　
　　　　　 </object>　　
</body>
</html>

[color=blue]解释一下：
1.movie参数值指定我们的SWF文件，即FCF_Column3D.swf。
2.FlashVars参数值用来指定XML文件的路径以及图形的宽和高，dataURL指定xml的路径
3.我们会发现有一个embed参数，它的各个值都和param参数的值是一样的，为什么会这样呢？
其实，这是为了在不同的浏览器里都能运行Flash的一个解决办法。IE浏览器是使用param参数来运行Flash的，而Netscape则是使用embed参数来运行Flash。因此，为了保证我们的应用能够在大多数浏览器上运行，我们就需要加上embed参数，并且值和param完全相同[/color]

==================================================================
2.用js来生产图形
[color=blue]使用JavaScript 的方式有几个好处，
一是代码量大大减少，特别是当一个页面上有几个图形时。
二是代码更加直观。
三是可以避免IE 出现“单击以激活使用这个控件”的提示。[/color]

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My First </title>
    <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
  </head>
<body bgcolor="#ffffff">　　
  <div id="chartDiv" align="center">对不起，有错误</div>
  <script type="text/javascript">
     var myChart = new FusionCharts("FusionCharts/FCF_Column3D.swf", "myChartId", "600", "350");
     myChart.setDataURL("xml/first.xml");       
     myChart.render("chartDiv"); 
  </script>
</body>
</html>

[b]解释一下：
1.要导入FusionCharts.js文件
2.<div id="chartdiv" align="center">XXXXXXX</div>
图形将出现这个DIV 里，到时这里的字将被图形替代。
3.我们用四个参数建立了一个FusionCharts 对象，
varmyChart= newFusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId", "600", "500");
第一个参数是SWF 文件的地址。
第二个是图形的id。这个id 你可以随便叫什么，但是要注意，在后面我们讲到一个页面里有多个图形的时候，这个id 一定要是唯一的。
第三个参数是图形的宽。
第四个参数是图形的高。
4.我们还要设置数据文件的地址。
myChart.setDataURL("xml/first.xml");
5.我们把图形渲染在指定的地方。
myChart.render("chartdiv");
"chartdiv"就是前面的DIV 的id，这就表示把图形render 到"chartdiv"。[/b]

============================================================================
3.用flash标签+xml文本
dataXML 和dataURL 都可以提供数据，dataURL 是以把XML 文件地址以URL 的形式告
诉FCF，如一个静态的文件Data.xml，或者是一个动态的文件，如mydata.jsp（页面返回XML
格式的文本）。dataXML 则是以XML 文本的形式告诉FCF。可能有点不好理解，看看下面的
代码就知道了

<html>
<body bgcolor="#ffffff">
<h2 align="center">Using dataXML  in HTML Embedding </h2>
<div align="center">
  <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="600" height="400" id="Column3D" >
    <param name="movie" value="FusionCharts/FCF_Column3D.swf" />
    <param name="FlashVars" value="&chartWidth=600&chartHeight=400&dataXML=<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'><set name='Jan' value='462' color='AFD8F8' /><set name='Feb' value='857' color='F6BD0F' /><set name='Mar' value='671' color='8BBA00' /><set name='Apr' value='494' color='FF8E46'/><set name='May' value='761' color='008E8E'/><set name='Jun' value='960' color='D64646'/><set name='Jul' value='629' color='8E468E'/><set name='Aug' value='622' color='588526'/><set name='Sep' value='376' color='B3AA00'/><set name='Oct' value='494' color='008ED6'/><set name='Nov' value='761' color='9D080D'/><set name='Dec' value='960' color='A186BE'/></graph>">
    <param name="quality" value="high" />
    <embed src="FusionCharts/FCF_Column3D.swf" flashVars="&chartWidth=600&chartHeight=400&dataXML=<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'><set name='Jan' value='462' color='AFD8F8' /><set name='Feb' value='857' color='F6BD0F' /><set name='Mar' value='671' color='8BBA00' /><set name='Apr' value='494' color='FF8E46'/><set name='May' value='761' color='008E8E'/><set name='Jun' value='960' color='D64646'/><set name='Jul' value='629' color='8E468E'/><set name='Aug' value='622' color='588526'/><set name='Sep' value='376' color='B3AA00'/><set name='Oct' value='494' color='008ED6'/><set name='Nov' value='761' color='9D080D'/><set name='Dec' value='960' color='A186BE'/></graph>" quality="high" width="600" height="400" name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
  </object>
</div>
</body>
</html>

解释一下：
[b]1.用dataXML取代了dataURL
2.原来我们放到FlashVars 的两个参数--chartWidth，chartHeight，则被放到了SWF 文件地
址的后面。[/b]

======================================================================================
4.用js+xml文本

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

<body bgcolor="#ffffff">
<h2 align="center">Using dataXML method in JavaScript</h2>
<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/FCF_Column3D.swf", "myChartId", "550", "450");
myChart.setDataXML("<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'><set name='Jan' value='462' color='AFD8F8' /><set name='Feb' value='857' color='F6BD0F' /><set name='Mar' value='671' color='8BBA00' /><set name='Apr' value='494' color='FF8E46'/><set name='May' value='761' color='008E8E'/><set name='Jun' value='960' color='D64646'/><set name='Jul' value='629' color='8E468E'/><set name='Aug' value='622' color='588526'/><set name='Sep' value='376' color='B3AA00'/><set name='Oct' value='494' color='008ED6'/><set name='Nov' value='761' color='9D080D'/><set name='Dec' value='960' color='A186BE'/></graph>");

myChart.render("chartdiv");
</script>

</body>
</html>

[color=blue]解释一下：
1.原来我们调用的是setDataURL()方法，而现在是setDataXML()方法，它的参数则是一个
完整的XML 字符串。
2.我们知道，在使用GET 方法得到参数时，浏览器对参数值的长度是有一定的限制的，所
以，如果XML 字符过长，可能会产生问题。这时我们就需要使用setDataURL()方法。
如果你的XML 字符里含有双字节字符，例如中文字符，你就不能使用setDataXML()方法，
你应该使用setDataURL()方法。
3.在读取本地的xml文件时，必须用setDataURL("xml/first.xml"),不能用setDataXML,否则一直报错[/color]

[color=red]问题：
　如果你很不幸，没有在页面上看到图形，那么可能是下面的原因之一：
　　1.SWF 没有放到正确的文件夹。
　　2.在Chart.html里，SWF的路径设置不正确。
　　3.没有安装Flash Player。
　　4.没有启用浏览器Flash播放选项。
　如果你得到了一个“Error in Loading Data”的消息，可能是：
　　1.Data.xml文件没放到正确的文件夹。
　　2.Data.xml的文件名不正确。比如，你可能不小心把它命名为Data.xml.txt。
　如果你得到了一个“Invalid XML Data”的消息，可能是;
　　1.Data.xml里的内容有错误。[/color]

中文乱码的解决：
[b]将例子改为中文后，刷新页面会出现Invalid XML Data
FusionCharts告诉我们XML文件加载失败，可能有非法字符。
要修改xml文件，说是在xml文件前面加上
<?xml version="1.0" encoding="UTF-8" ?>
就行了，但是事实上还是 Invalid XML Data
后来，我上网查了，官方说当前Data.xml文件缺乏BOM标记（Byte Order Mark），
也就是说我们加了这句话后最好打开UltraEdit 文本编辑器，重新保存一下，保存时选择utf-8的编码来保存，
这样就搞定了[/b]