chart.jsでグラフを更新する度にサイズがどんどん大きくなってしまう
chart.jsでグラフを描いてるんだけど、データを更新してグラフを新規描画するたびに、グラフのcanvas要素がどんどん大きくなってしまう変な現象が起きた。
↓コードはこんな感じ
var ctx = document.getElementById("line").getContext("2d"); mychart = new Chart(ctx).Line(data_hoge1, option); mychart.destroy(); mychart = new Chart(ctx).Line(data_hoge2, option);
この現象はPCのブラウザ(Chrome)では発生しなくて、スマートフォン(iPhone)でだけ発生する様子。
しょうがないので下記のように毎回canvasのサイズを指定してあげるようにしたら、ちゃんとグラフが固定サイズで描画されるようになった。
var ctx = document.getElementById("line").getContext("2d"); ctx.canvas.width = 600; ctx.canvas.height = 200; mychart = new Chart(ctx).Line(data_hoge1, option); mychart.destroy(); ctx.canvas.width = 600; ctx.canvas.height = 200; mychart = new Chart(ctx).Line(data_hoge2, option);
あと、もう一点変な動作してるとこがあった。
新規グラフを描画するとき、上記コードのようにいちいちdestroy()処理を入れないと、グラフがうまく更新されないのだ(マウスでフォーカスすると、新・旧グラフがチカチカと交互に表示される変な状態になる)
何か自分がまずいやり方をしているのかな、まぁ一応上記のコードでちゃんと動作しているのでよしとするか。。