概要
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
プロパティで調整したほうがよさそうです。