Chart.js で縦幅を固定、横幅のみレスポンシブに対応する



JavaSCript のグラフ描画ライブラリの1つに、Chart.js がありよく使われています。

Chart.js は canvas 要素の上に描画します。

グラフ描画領域の縦横比(アスペクト比)は canvas の HTML に widthheight で指定します。 これが表示サイズにもなります。

widthheight を指定しないときのデフォルト値は width=300, height=150 です。

ブラウザの表示サイズに応じて、グラフの横幅を動的に変えたい場合があります。しかし canvas とレスポンシブの相性はなかなかやっかいな問題があります。canvas の幅を CSS で width: 100%; などと指定してもうまくいきません。ぼやけたりゆがんだりしてしまいます。

CSS で幅と高さを指定したつもりでも、それは HTML で幅と高さを指定するのとは意味が異なります。canvas 要素の描画領域は HTML で指定した値(指定していなければデフォルト値)のままであり、それが CSS でしていしたサイズに引き延ばされて表示されるだけだからです。

canvas の横幅を動的に指定する

canvas の表示サイズだけでなく描画領域のサイズも動的に変更するには、JavaScript を使って canvas 要素の widthheight 属性の値をセットします。

このとき canvas に親要素を作っておきます。

親要素の幅と高さは CSS で指定しておきます。

画面の読み込み完了後に canvas の幅と高さの値を JavaScript でセットします。jQuery でやるのであれば、以下のようになります。

上の例では高さは 300px 固定として書いていますが、もちろんこちらも動的に変更することができます。

Chart.js のオプションを指定してレスポンシブにする

さて canvas のサイズを動的に変えるのであれば、ウィンドウをリサイズしたときに canvas の再描画をしないと不都合です。

Chart.js では optionsに responsive: true, を指定することで、自動的に対応してくれます。今回のように幅と高さの比率が動的に変化する場合は、maintainAspectRatio: false, も指定してやるとうまく行きます。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です