WT-Toolkit のグラフをIEでも表示できるようにする
IEでは動かないんですよ
前回の日記では、JavaScriptベースのグラフィックライブラリ WT-Toolkitを用いたグラフ作成のサンプルを紹介しました。
しかし、このサンプル、実はFirefox 2.0 以上でないと見れないはずです(Firefox のヴァージョンはうろ覚え)。少なくとも Internet Explorer では見れないはずです。実際、僕のマシンのIE 6.0 では、以下のようなエラーがでます。
エラー：予期しないメソッドの呼び出し、またはプロパティ アクセスです。
WT-Toolkit が生成するもの
なぜ、Firefox ではグラフが表示されて、IE では表示されないんでしょう？
鋭い人なら原因はすぐに分かると思います。
結論から言ってしまえば、WT-Toolkit は、グラフを SVG [Scalable Vector Graphics] 形式で出力しているので、IEではデフォルトでは動作しません。
Firefox ユーザの方で、Firebug (高機能なデバッガ) を使ったことがあるのなら、グラフのHTMLを見てみてください。以下のような感じのデータが出力されているはずです。
<svg id="1" style="position: absolute;">
<g id="1" transform="translate(0) />
<text id="1" style="position: absolute;">Chart Title</text>
<g id="1" transform="translate(31.2132, 180)"></g>
<text id="1" style="position: absolute;">40</text>
</g>
</svg>
Firefox の SVG と IE の VML
Firefox はネイティブで SVG をサポートしてくれています。それに対して、IEでは、SVGではなく、VML [Vector Markup Language] をサポートし、SVGには対応していません。一応、SVGが主流なので、IEは早めにSVGのネイティブサポートして欲しいですね。(^^;
SVG を VML に渡して解決します
動いてるものを見る
では、IEでSVGを表示するようにサンプルを改良します。WT-Toolkit の公式サイトの Live Demo では、 IE でも問題なくグラフが表示されています。そこで、Live Demo のソースコードをちょっと拝借して、サンプルとの違いを探してみました。
どうやら、IE で SVG 形式のデータを表示するには、SVGのタグの処理を VML に代替させることで表示できるみたいです。
XMLNamespace を追加する
SVG の処理を VML に任せるためには、SVG、VML等の XMLNameSpace を追加し、SVG 用のタグの振舞いをVMLで行わせるようにすることで、IEでもSVGを表示しているように見せることができます。
まず、HTMLタグにXMLNameSpaceを追加します。XMLNameSpace そのものの説明については、適宜、ググって下さい。
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
これで、svg, v, o タグの名前空間が宣言されました。次に、v, o タグの振舞いをVMLに任せるようにします。HEADタグ内に書いてください。
<style type="text/css">
v\:* { behavior: url(#default#VML);}
o\:* { behavior: url(#default#VML);}
</style>実際は、style の指定はなくても表示されませんでしたが、念のために書いた方がいいです。
