2014年8月11日月曜日

Chart.jsで作ったグラフをajaxで更新するとcnavasのサイズがおかしくなった

先日、Chart.jsライブラリを使って、グラフを作った。


ご存知の方も多いだろうが、Chart.jsは簡単にグラフを作れるjavascriptライブラリである。

基本的には以下のように使う。

HTML
<canvas id="chart" width="150" height="150"></canvas>

JavaScript
new Chart($("#chart").getContext("2d")).Pie(data, option);


今回はajaxで定期的にデータを更新する必要があったため、その都度上のjsを実行してグラフを再描画させていた。

しかし、このやり方だとPCのブラウザでは問題なかったが、iPadやNexus7のようなdpiの高い端末のブラウザで、
再描画のたびにcanvasのサイズが大きくなっていくトラブルが発生した。

そこで、jsを以下のように変更

var chart = new Chart($("#chart").getContext("2d"));
// 初回
chart.Pie(data, option);
// 2回目以降
chart.Pie(newData, option);

つまり、はじめにグラフを生成した時のインスタンスを保持しておき、
以後はそのインスタンスを更新する形にするのだ。
こうすれば、canvasのサイズが勝手に変わることもなく、グラフを更新することができる。

0 件のコメント :