次の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>