end0tknr's kipple - 新web写経開発

http://d.hatena.ne.jp/end0tknr/ から移転しました

FusionChartsでz-indexを有効にするにはsetTransparent()

次のurlにある「Flash コンテンツで z-index を有効にする方法」を読んで、以前、FusionChartsで作成されるグラフが他の要素の前面に重なって表示される現象を思い出しました。

http://www.drk7.jp/MT/archives/001434.html

www.drk7.jpで紹介されていたz-index有効化

<object>
<param  name="..."  value="..."  />
<param  name="..."  value="..."  />
<param  name="wmode"  value="transparent">
<embed  src="..."  wmode="transparent"  />
</object>

FusionChartsによる前面?表示例

※表示例では分かりづらいですが、IEではカレンダーが背面に隠れます

FusionCharts.jsにsetTransparent()発見

FusionChartsでは、javascriptからflash(swf)ファイルを読んでるので、先程のwmodeやtransparentを加えようと思ったら、既にsetTransparent()というmethodが存在しました。

なので、次のように chart.setTransparent(1); を追加することで解消しました。

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- http://www.fusioncharts.com/free -->
<script language="javascript" src="FusionCharts.js"></script>
<!-- http://www.kawa.net/works/js/jkl/calender.html -->
<script language="javascript" src="jkl-calendar.js"></script>
</head>
<body>
<form id="formid">
<select>
  <option>OPTION A</option>
  <option>OPTION B</option>
  <option>OPTION C</option>
  <option>OPTION D</option>
</select>

<input type="text" name="colname" onClick="cal1.write();" 
       onChange="cal1.getFormValue(); cal1.hide();"><br>
<div id="calid" style="z-index:10"></div>
<br>
<br>
<div id="graph" style="z-index:1"></div>
</form>
</body>
<script>

var cal1 = new JKL.Calendar("calid","formid","colname");

var chart = new FusionCharts("FCF_Column2D.swf","graph","400", "300");
chart.setDataURL("Column2D.xml");
chart.setTransparent(1); //wmodeやtransparentの追加
chart.render("graph");
</script>
</html>