Chart.js - にほんご。

Responsive Charts

更新日: 2018-09-04

ウィンドウサイズに応じてチャートサイズを変更する場合、 表示サイズ(canvas.style.widthcanvas.style.height)に対して、 キャンバスのレンダリングサイズ(canvas.widthcanvas.height)を相対値で表現することができない、 という大きな制約があります。 さらに、これらのサイズは、それぞれが独立しているため、 レンダリングサイズが、表示サイズに基づいた自動調節が行われず、正確な結果になりません。

以下の例は動きません

  • <canvas height="40vh" width="80vw"> : 無効な値です。キャンバスはリサイズされません。(example)
  • <canvas style="height:40vh; width:80vw"> : 無効な挙動です。キャンバスはリサイズされますが、ぼやけてしまいます。(example)

Chart.jsには、キャンバスの表示サイズが変更された時にチャートをレスポンシブにリサイズし、 それに応じてレンダリングサイズを更新するためのいくつかのオプションがあります。

オプション

名称type初期値説明
responsivebooleantrueコンテナをリサイズした時に、チャートのキャンバスをリサイズします。 (重要な注意点を参照してください。)
responsiveAnimationDurationnumber0サイズ変更イベント後に、新しいサイズにするアニメーションの時間(ms)。
maintainAspectRatiobooleantrueサイズ変更時のアスペクト比(幅/高さ)を維持するかどうかを指定します。
onResizefunctionnullリサイズされた時に呼び出されます。 引数としてチャートのインスタンスと、新しいサイズを渡します。

重要な注意点

キャンバスの変更をcanvas要素から直接検出することはできません。 Chart.jsは親コンテナを使用してキャンバスをレンダリングし、表示サイズを更新します。 ただし、この方法ではコンテナを相対配置に指定し、 さらにチャートのキャンバス専用にする必要があります。 そして、コンテナサイズの相対値を指定することで、レスポンシブにすることができます。 (example)

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
  <canvas id="chart"></canvas>
</div>

プログラムでコンテナのサイズを変更することで、チャートのサイズを変更することもできます。

chart.canvas.parentNode.style.height = '128px';


© 2013 Chart.js is available under the MIT license

このコンテンツはChart.jsドキュメントを翻訳/改変したものです。