概要
Chart.js で 2箇所の <canvas> 要素にグラフを描画しようとしたけど、
どちらも表示されない。。
ちなみに、<button type="button"> 要素をクリックしたときに描画したい。
バージョン
Chart.js 2.1.4
原因と対策方法
jsファイルではなく、htmlファイルに原因がありました。block要素で囲っていなかったため、他の要素に重なってしまったのかな?
それぞれの<canvas>要素を<div> 要素で囲ってあげたら上手くいきました。
修正前
<canvasid="chart_line"></canvas> <canvasid="chart_bar"></canvas>
修正後
<div> <canvasid="chart_line"></canvas> </div> <div> <canvasid="chart_bar"></canvas> </div>
1時間以上ハマってしまった。。解決できてよかったけど。
ちなみに、スタイルシートで何もしないと馬鹿でかかったので、<div> 要素を width プロパティで調整したほうがよさそうです。


