[chart.js]レスポンシブにしたいのに縮小しかできないときのチェック項目

縮小一辺倒にしかならない場合。

症例

例えばこんな感じでHTMLを用意していたとして。

<div class="graph">
    <canvas id="chart"></canvas>
</div>

cssをこうしているとする。

.graph{
    width: 100%;
}

読み込み時の領域に合わせてグラフが表示される。

ウィンドウを狭くすると、領域の幅に合わせてグラフ(canvas)も狭くなる。

ウィンドウを広げると、グラフは小さいまま。

狭める→広げる、読み込み→広げる、どちらも同じ。つまり、単純にグラフを大きくすることができない。

chart.jsはレスポンシブに対応してるはずなのにどうしてだ、ということになる。

原因

仕様です。

親要素(.graph)の高さが指定されていない・指定しても実数じゃない(%)場合、縮小しか対応しない。

対処法1

%はダメだけどvhやらvwは使える。グラフは初期状態なら大体2:1なので、例えばこんな感じでやれば無駄な余白を生むことなく設置できる。

.graph{
    width: 100vw;
    height: 50vw;
}

対処法2

youtube埋め込みのレスポンシブ化と同じ方法を使えば%指定で拡大対応の構築ができる。

.graph{
    width: 100%;
    height: 0;
    padding-top: 50%;
    position: relative;
}
.graph canvas#chart{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

高さは幅に準拠で幅を%で指定できるから、記事内に埋め込む用途の場合はこっちの方が楽だと思う。というか、これで統一して良いんじゃないかな。

js側でレスポンシブの記述は必要ない。CSSの調整だけで済むのでそこまで手間じゃない。

コメント

タイトルとURLをコピーしました