FusionCharts的div图层显示：如何让div显示在最上层 2010-06-23 11:21 div的图层由div的style中的z-index来决定，z-index是层垂直屏幕的坐标，0最小，越大的话位置越靠上。 由于FusionCharts的图表都放在div中，如果页面还有其他的div，将被FusionCharts的图层挡住。不过设置z-index并不起 作用，其他的div仍然被挡住。经过网络上查找，发现原来是这样的： flash的图默认情况下总是位于最上 层，参考下面的文档： <param name="WMODE" value="transparent"> <param name="wmode" value="Opaque"> <param name="wmode" value="Window"> NOTE: 支持其它浏览器(firefox opera etc.) 则使用 <embed wmode="transparent" />在embed节点中加入wmode值. window 模式 默认情况下的显示模式，在这种模式下flash player有自己的窗口句柄，这就意味着flash影片是存在于Windows中的一个显示实例，并且是在浏览器核心显示窗口之上的，所以flash只 是貌似显示在浏览器中，但这也是flash最快最有效率的渲染模式。由于他是独立于浏览器的HTML渲染表面，这就导致默认显示方式下flash总是会遮 住位置与他重合的所有DHTML层。 但是大多数苹果电脑浏览器会允许DHTML层显示在flash之上，但当flash影片播放时会出现比较诡异的现象，比如DHTML层像被flash刮掉 一块一样显示异常。 Opaque 模式 这是一种无窗口模式，在这种情况下flash player没有自己的窗口句柄，这就需要浏览器需要告诉flash player在浏览器的渲染表面绘制的时间和位置。这时flash影片就不会在高于浏览器HTML渲染表面而是与其他元素一样在同一个页面上,因此你就可 以使用z-index值来控制DHTML元素是遮盖flash或者被遮盖。 Transparent 模式 透明模式，在这种模式下flash player会将stage的背景色alpha值将为0并且只会绘制stage上真实可见的对象，同样你也可以使用z-index来控制flash影片的 深度值，但是与Opaque模式不同的是这样做会降低flash影片的回放效果，而且在9.0.115之前的flash player版本设置wmode=”opaque”或”transparent”会导致全屏模式失效。 了解了各种模式的实现方式和意义在以后的开发中就可以按照具体情况选择设置wmode属性的值了。 所以只要将flash的wmode设置成opaque就行了。所以在页面加载FusionCharts图表时，修改参数wmode，在页面上加载 flash的js代码中加上这句 chart.addParam("wmode","Opaque");就可以了
最近我自己做了一个PHP结合FusionChartsFree生成中文饼状统计图的例子，如下图：
![]( "[转载]我做的PHP结合FusionCharts生成中文饼状统计图的例子")
![[转载]我做的PHP结合FusionCharts生成中文饼状统计图的例子](http://s8.sinaimg.cn/middle/684b60a7t7587642cc147&690 "[转载]我做的PHP结合FusionCharts生成中文饼状统计图的例子")
将FusionChartsFree的FusionCharts.js文件和swf文件，还有相应的xml文件拷贝到我们要兴建的工程里，其目录结构如下图：
![[转载]我做的PHP结合FusionCharts生成中文饼状统计图的例子](http://s8.sinaimg.cn/middle/684b60a7t9749f2422dc7&690 "[转载]我做的PHP结合FusionCharts生成中文饼状统计图的例子")
具体代码如下：
(请大家注意，新浪为了避免黑客利用JS漏洞对页面进行篡改，所以给所有博文中的getElementById后面都自动加上了x_x，所有getElementsByTagName后面都自动加上了_r,请您在使用本源码的时候去掉就可以了。)
pie.php文件内容如下：
<?php
//$sql = "";// 查询数据库要用的SQL
$allnum = array(20,30,40,80,60,10,70,50);//从数据库得到结果集数组
$xml = new DOMDocument();//实例化DOM对象
$xml->load( 'chart/xml/Pie2D.xml' );//载入要处理的XML文件
$i = 1;
foreach($xml->getElementsByTagName_r('set') as $list)
{
$id = $list->getAttribute('id');
if ($id == $i)
{
$list->setAttribute('value', $allnum[$i-1]);
}
$value = $list->getAttribute('value');
$i++;
}
$xml->save('chart/xml/Pie2D.xml');//保存修改后的XML文件
include 'pie.html';//如果用了Smarty模板引擎，这里就是$smarty->display("pie.html");
其Pie2D.xml文件的内容如下：
<?xml version="1.0" encoding="GB2312"?>
<graph showNames="1" decimalPrecision="0" baseFontSize="16">
<set name="张洋" value="20" id="1" isSliced="1"/>
<set name="贝拉克.奥巴马" value="30" id="2"/>
<set name="吉米.卡特" value="40" id="3"/>
<set name="乔治.华盛顿" value="80" id="4"/>
<set name="约翰.亚当斯" value="60" id="5"/>
<set name="托马斯.杰斐逊" value="10" id="6"/>
<set name="亚伯拉罕.林肯" value="70" id="7"/>
<set name="詹姆斯.布坎南" value="50" id="8"/>
</graph>
其pie.html文件的内容如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>饼图示例</title>
<script language="JavaScript" src="chart/JSClass/FusionCharts.js"></script>
</head>
<body>
<div style="980px; padding:50px; border:1px solid #CAE2EF; margin: 0 auto;">
<div id="chartdiv" align="center"> 统计图生成失败 </div>
<script type="text/javascript">
var chart = new FusionCharts("chart/swf/FCF_Pie2D.swf", "ChartId", "700", "400");
chart.setDataURL("chart/xml/Pie2D.xml");
chart.render("chartdiv");
</script>
</div>
</body>
</html>
将FusionChartsFree的FusionCharts.js文件和swf文件，还有相应的xml文件拷贝到我们要兴建的工程里，其目录结构如下图：
具体代码如下：
(请大家注意，新浪为了避免黑客利用JS漏洞对页面进行篡改，所以给所有博文中的getElementById后面都自动加上了x_x，所有getElementsByTagName后面都自动加上了_r,请您在使用本源码的时候去掉就可以了。)
pie.php文件内容如下：
<?php
//$sql = "";// 查询数据库要用的SQL
$allnum = array(20,30,40,80,60,10,70,50);//从数据库得到结果集数组
$xml = new DOMDocument();//实例化DOM对象
$xml->load( 'chart/xml/Pie2D.xml' );//载入要处理的XML文件
$i = 1;
foreach($xml->getElementsByTagName_r('set') as $list)
{
$id = $list->getAttribute('id');
if ($id == $i)
{
$list->setAttribute('value', $allnum[$i-1]);
}
$value = $list->getAttribute('value');
$i++;
}
$xml->save('chart/xml/Pie2D.xml');//保存修改后的XML文件
include 'pie.html';//如果用了Smarty模板引擎，这里就是$smarty->display("pie.html");
其Pie2D.xml文件的内容如下：
<?xml version="1.0" encoding="GB2312"?>
<graph showNames="1" decimalPrecision="0" baseFontSize="16">
<set name="张洋" value="20" id="1" isSliced="1"/>
<set name="贝拉克.奥巴马" value="30" id="2"/>
<set name="吉米.卡特" value="40" id="3"/>
<set name="乔治.华盛顿" value="80" id="4"/>
<set name="约翰.亚当斯" value="60" id="5"/>
<set name="托马斯.杰斐逊" value="10" id="6"/>
<set name="亚伯拉罕.林肯" value="70" id="7"/>
<set name="詹姆斯.布坎南" value="50" id="8"/>
</graph>
其pie.html文件的内容如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>饼图示例</title>
<script language="JavaScript" src="chart/JSClass/FusionCharts.js"></script>
</head>
<body>
<div style="980px; padding:50px; border:1px solid #CAE2EF; margin: 0 auto;">
<div id="chartdiv" align="center"> 统计图生成失败 </div>
<script type="text/javascript">
var chart = new FusionCharts("chart/swf/FCF_Pie2D.swf", "ChartId", "700", "400");
chart.setDataURL("chart/xml/Pie2D.xml");
chart.render("chartdiv");
</script>
</div>
</body>
</html>