やったこと

webサービスを作るときに考えたことを垂れ流します

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()処理を入れないと、グラフがうまく更新されないのだ(マウスでフォーカスすると、新・旧グラフがチカチカと交互に表示される変な状態になる)

何か自分がまずいやり方をしているのかな、まぁ一応上記のコードでちゃんと動作しているのでよしとするか。。