TechNote

とあるエンジニアのただのメモ

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というのはIEcanvasを使えるようにするための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のところで出ているらしい。 ChromeFirefoxではもうこの段階できれいなドーナツグラフが表示されているのに、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のエラーが出てる。

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

ただし、今度のエラー箇所はchart.js内の2171行目。

var startTime = Date.now();

とりあえず、何に使うかもわからないけど、Date.now()という書き方が多分サポートされてない。動かすのが優先だし0を入れてみる。(同じくEndTimeの部分にも)

これでブラウザをリロードしてみると...。 [caption id="attachment_111" align="alignnone" width="375"]chart.js chart.js[/caption] うまくいった。アニメーションもきちんと動作してる。

つくって覚えるCoffeeScript入門

つくって覚えるCoffeeScript入門