[chart.js + css]レスポンシブをうまいことやる

画像とかと同じノリだとうまくいかない。

支障が出る例

基本的にchart.jsで生成した<canvas>はサイズが実数値で指定される。

画像よろしく幅を%とかvwとかで指定すればいいかといえば、うまくいかない場合がある。

縮小できなかったり、縮小できても拡大できなかったり。

ページ読み込み時にブラウザ幅に合わせて描画されるのだけど、表示後の幅変更に対応してなかったり。

現状の個人的最適解

const chart = new Chart(ctx, {
    ⋮
    options: {
        responsive: true,
    },
});
<div class="wrap">
    <canvas id="chartjs"></canvas>
</div>
.wrap{
    width: 100%;
    max-width: 640px;
    height: 320px;
    position: relative;
    canvas{
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }
}

chart.jsはv4で確認。

環境というか組み方というかでレスポンシブ動作が不安定だったところに、absoluteでサイズを親依存にすると一律で安定した。

要するにyoutubeとかの埋込をレスポンシブ化するときと同じ感じに組めばいいという話。

それこそyoutube埋め込みみたいに縦横比を固定したいならこんな感じ。

<div class="wrap">
    <div class="inner">
        <canvas id="chartjs"></canvas>
    </div>
</div>
.wrap{
    width: 100%;
    max-width: 640px;
    .inner{
        width: 100%;
        height: 0;
        padding-top: 56.25%; //16:9
        position: relative;
        canvas{
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
        }
    }
}

最大サイズを指定したい場合とかを踏まえて、入れ子を1つ増やすのが安全。

多分どっかで間違ってるんだろうという危惧はある

検索しても同じ悩みを持ってる人はそんなにいないっぽいし、同様の処置をしてる記事は見なかった気がする。

そもそも仕様をまともに調べずに使ってるのが悪いという気もするんだけど、まあ、汎用性とか考えて自分に扱いやすい構成が作れたので良しとします。

コメント

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