Chart.jsを用いて複数のグラフをウィンドウサイズに比例表示する際の注意点
Chart.jsを用いて複数のグラフをウィンドウサイズに比例表示する際の注意点:
画面半分をWebGLのcanvas、もう半分をChart.jsのcanvasを縦に3つ並べる、といった状態のアプリケーションを作る際にハマってしまった内容について
HTMLでは、このように1つのdivの中に3つのcanvasを並べていた。
そして、これを
上記のようにJavaScript側で処理したが、うまく思い通りに反映されなかった。
どうも一つの
概要
画面半分をWebGLのcanvas、もう半分をChart.jsのcanvasを縦に3つ並べる、といった状態のアプリケーションを作る際にハマってしまった内容について
当初のコード
HTMLでは、このように1つのdivの中に3つのcanvasを並べていた。index.html
<body>
<div id="data_display">
<canvas id="dx_canvas"></canvas> //X軸のデータを表示するキャンバス
<canvas id="dy_canvas"></canvas> //Y軸のデータを表示するキャンバス
<canvas id="dz_canvas"></canvas> //Z軸のデータを表示するキャンバス
</div>
</body>
script.js
var dx_c = document.getElementById("dx_canvas");
data_resize('dx_canvas', 0.5, 0.3); //()内は左から順に（canvas要素、横の比率、縦の比率）
var dy_c = document.getElementById("dy_canvas");
data_resize('dy_canvas', 0.5, 0.3);
var dz_c = document.getElementById("dz_canvas");
data_resize('dz_canvas', 0.5, 0.3);
utils.js
function data_resize(id, wdpr, hdpr){
var c = document.getElementById(id);
c.width = window.innerWidth * wdpr;
c.height = window.innerHeight * hdpr;
}
解決法
どうも一つのの中に複数枚キャンバスを用意してしまったのがいけなかったらしい。
こうすることで考えた通りの配置にすることが出来た。
今回の挙動を見ると、Chart.jsを使用する場合は１つのブロックに1つのキャンバスにした方が良さそうです。
index.html
<body>
<div id="dx_display"> //X軸のデータを表示
<canvas id="dx_canvas"></canvas>
</div>
<div id="dy_display"> //Y軸のデータを表示
<canvas id="dy_canvas"></canvas>
</div>
<div id="dz_display"> //Z軸のデータを表示
<canvas id="dz_canvas"></canvas>
</div>
</body>
コメント
コメントを投稿