チャートコンテナとサイズ

「はじめに」では、EChartsを初期化するAPI echarts.init を紹介しました。APIドキュメントでは、各パラメータの具体的な意味について説明しています。以下の内容を読む前に、ドキュメントをよく読んで理解してください。

いくつかの一般的な使用例を参照して、チャートを初期化し、サイズを変更する例を示します。

初期化

HTMLで親コンテナを定義する

一般的に、<div>ノードを定義し、CSSを使用して幅と高さを変更する必要があります。初期化時に、チャートをノードにインポートします。opts.widthまたはopts.heightを宣言せずに初期化すると、チャートのサイズはノードのサイズになります。

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));
</script>

echarts.initを呼び出す前に、コンテナに幅と高さが設定されていることを確認する必要があります。

チャートサイズを指定する

コンテナの高さまたは幅が存在しない場合、またはチャートサイズをコンテナサイズと等しくしない場合は、最初にサイズを初期化できます。

<div id="main"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'), null, {
    width: 600,
    height: 400
  });
</script>

コンテナサイズの反応

コンテナサイズの変更に合わせてチャートサイズを変更する

場合によっては、コンテナのサイズが変更されたときに、それに合わせてチャートサイズを変更したいことがあります。

例えば、コンテナの高さが400pxで幅がサイト幅の100％の場合、サイト幅を変更してもチャート幅を100％に維持したい場合は、次の方法を試してください。

ブラウザのサイズ変更イベントをキャッチするために、サイトのresizeイベントをリスンできます。その後、echartsInstance.resizeを使用してチャートのサイズを変更します。

<style>
  #main,
  html,
  body {
    width: 100%;
  }
  #main {
    height: 400px;
  }
</style>
<div id="main"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));
  window.addEventListener('resize', function() {
    myChart.resize();
  });
</script>

ヒント：JS/CSSでコンテナサイズを調整することがありますが、これによってページサイズは変わらないため、resizeイベントはトリガーされません。ResizeObserver APIを試して、このシナリオに対応できます。

特定のチャートサイズを指定する

パラメータなしでresize()を呼び出す以外にも、高さや幅を指定して、コンテナサイズとは異なるチャートサイズを実現できます。

myChart.resize({
  width: 800,
  height: 400
});

ヒント：ドキュメントを読む際には、APIの定義方法に注意してください。resize() APIは、myCharts.resize(800, 400)のような形式で誤解されることがありますが、これは存在しません。

コンテナノードの破棄と再構築

いくつかのブックマークページがあり、各ページにいくつかのチャートが含まれていると仮定します。この場合、あるページを選択すると、他のページの内容がDOMから削除されます。ユーザーはこれらのページを再選択した後、チャートを見つけることができません。

これは本質的に、チャートのコンテナノードが削除されたためです。後でノードを再度追加しても、グラフが存在するノードは既に存在しません。

正しい方法は、コンテナが破棄された後にechartsInstance.disposeを呼び出してインスタンスを破棄し、コンテナが再度追加された後にecharts.initを呼び出して初期化することです。

ヒント：メモリリークを避けるために、ノードを破棄する際にechartsInstance.disposeを呼び出してリソースを解放してください。

コントリビューター GitHubでこのページを編集

pissang pissangplainheart plainheartppd0705 ppd0705