More than 3 years have passed since last update.

Chart.jsを用いて複数のグラフをウィンドウサイズに比例表示する際の注意点

Last updated at 2020-10-08Posted at 2018-12-11

概要

画面半分を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;
}

上記のようにJavaScript側で処理したが、うまく思い通りに反映されなかった。

解決法

どうも一つのdivの中に複数枚キャンバスを用意してしまったのがいけなかったらしい。

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>

こうすることで考えた通りの配置にすることが出来た。

まとめ

今回の挙動を見ると、Chart.jsを使用する場合は１つのブロックに1つのキャンバスにした方が良さそうです。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up