chart.jsはIE8でも使える！ドーナツグラフをIE8で表示させたメモ

まったく需要はないと思われますが、どこかの誰かの役に立てば。

とても見栄えがよく、使用する機会の多いchart.jsのドーナツグラフですが、IE8では使えないことで有名です。「IE8　chart.js」等で検索すると、「動かない」「not work」系の質問記事がとても多く見受けられ、IE8環境では絶対かかわりたくない案件ですが、今回そのかかわりたくない案件にかかわらないといけない場面に遭遇し、何とかIE8でchart.jsを動かすに至ることおができたのでメモを残しておきます。

まずは普通に必要なjsを読み込んでおきます。jquery.js、chart.js、excanvas.jsが必要です。 excanvas.jsというのはIEでcanvasを使えるようにするためのJavaScriptライブラリです。

chart.jsでグラフを書くときの基本的な記述方法はこうです。

<?php
$color1 = "#ff5050";
$color2 = "#ffc000";
$color3 = "#00b050";
$color4 = "#7030a0";
$color5 = "#ddd";
$color6 = "#00a0da";

$name1 = "test1";
$name2 = "test2";
$name3 = "test3";
$name4 = "test4";
$name5 = "test5";
$name6 = "test6";

$count1 = 41;
$count2 = 15;
$count3 = 13;
$count4 = 15;
$count5 = 21;
$count6 = 29;
?>

<canvas id="sample" height="300" width="300"></canvas>

<script type="text/javascript">
var doughnutData = [
    {
        value: <?php echo $count1;?>,
        color:"<?php echo $color1; ?>",
        label:"<?php echo $name1; ?>"
    },
    {
        value: <?php echo $count2;?>,
        color:"<?php echo $color2; ?>",
        label:"<?php echo $name2; ?>"
    },
    {
        value: <?php echo $count3;?>,
        color:"<?php echo $color3; ?>",
        label:"<?php echo $name3; ?>"
    },
   {
        value: <?php echo $count4;?>,
        color:"<?php echo $color4; ?>",
        label:"<?php echo $name4; ?>"
    },
   {
        value: <?php echo $count5;?>,
        color:"<?php echo $color5; ?>",
        label:"<?php echo $name5; ?>"
    },
   {
        value: <?php echo $count6;?>,
        color:"<?php echo $color6; ?>",
        label:"<?php echo $name6; ?>"
    }
];

var myDoughnut = new Chart(document.getElementById("sample").
getContext("2d")).Doughnut(doughnutData);
</script>

ですが、IE8ですから、これでは下記のようなエラーとなります。

オブジェクトでサポートされていないプロパティまたはメソッドです。

これがどこで出ているか調べると、この行です。

var myDoughnut = new Chart(document.getElementById("sample").
getContext("2d")).Doughnut(doughnutData);

調べていくと、どうやらgetContextのところで出ているらしい。 ChromeやFirefoxではもうこの段階できれいなドーナツグラフが表示されているのに、IEだとここからが勝負です。

いろいろ調査した結果、下記のように書くとうまくいきます。

var canvas = document.getElementById("sample");
canvas = G_vmlCanvasManager.initElement(canvas);//初期化

var ctx = canvas.getContext("2d");
var myDoughnut = new Chart(ctx).Doughnut(doughnutData);

どうやらgetContextはIEでは初期化みたいなことをしないと使えないようです。

ここまで修正して、ブラウザをリロードしてみるも、グラフが表示されるはずのところに何もでてこない。いや、マウスオーバーしたら、出てきた。なんだか動きがおかしい。よくみるとjavascriptのエラーが出てる。