ishii-akihiro’s blog

いろいろ試したことやバグ対応の作業履歴を残していきます。

Chart.js で canvas 要素にグラフが表示されない

概要

Chart.js で 2箇所の <canvas> 要素にグラフを描画しようとしたけど、
どちらも表示されない。。
ちなみに、<button type="button"> 要素をクリックしたときに描画したい。

バージョン

Chart.js 2.1.4

原因と対策方法

jsファイルではなく、htmlファイルに原因がありました。
block要素で囲っていなかったため、他の要素に重なってしまったのかな?
それぞれの<canvas>要素を<div> 要素で囲ってあげたら上手くいきました。

修正前

  <canvas id="chart_line"></canvas>

  <canvas id="chart_bar"></canvas>

修正後

<div>
  <canvas id="chart_line"></canvas>
</div>
    
<div>
  <canvas id="chart_bar"></canvas>
</div>

1時間以上ハマってしまった。。解決できてよかったけど。
ちなみに、スタイルシートで何もしないと馬鹿でかかったので、
<div> 要素を width プロパティで調整したほうがよさそうです。