極座標系を使用して ECharts にデータを表示する方法

極座標系を使用して ECharts にデータを表示する方法

1. はじめに
ECharts は、JavaScript に基づいて開発されたオープン ソースの視覚化ライブラリであり、豊富なグラフの種類と対話型機能により、データを簡単に視覚的に表示できます。このうち、極座標系はEChartsでよく使われる座標系の一種で、データを極座標で表示することができ、データ間の関係をより明確にすることができます。この記事では、極座標系を使用して ECharts にデータを表示する方法を紹介し、いくつかの具体的なコード例を示します。

2. 基本構成
ECharts を使用して極座標系データを表示する前に、まず基本的な構成を実行する必要があります。 HTML ページの タグに、ECharts の JavaScript ファイルを導入します:

<script src="echarts.min.js"></script>

次に、特定の幅と高さの <div># を追加します。 ECharts チャートに対応するために使用される ##要素: <pre class='brush:html;toolbar:false;'>&lt;div id=&quot;chart&quot; style=&quot;width: 600px; height: 400px;&quot;&gt;&lt;/div&gt;</pre> 次に、JavaScript コードで ECharts インスタンスを作成し、対応する DOM 要素を取得する必要があります: <p><pre class='brush:javascript;toolbar:false;'>var chart = echarts.init(document.getElementById('chart'));</pre></p> 3.データの準備 <p>極座標系データを表示する前に、表示するデータを準備する必要があります。一連の 2 次元データがあるとします。各データは角度と半径の 2 つの値で構成されます。次のデータ構造を使用して保存できます: <br><pre class='brush:javascript;toolbar:false;'>var data = [ [10, 50], [45, 80], [90, 70], // ... ];</pre></p>4。データを表示するには極座標系を使用します。 <p>次に、ECharts が提供する <br>polar<code> 構成アイテムを使用して、極座標系を定義できます。 ECharts インスタンスを初期化した後、setOption メソッドを呼び出して、チャートの関連するスタイルとコンテンツを構成できます。

chart.setOption({
  polar: {},
  series: [{
    type: 'scatter',
    coordinateSystem: 'polar',
    data: data
  }]
});

その中で、

polar の値は、構成項目は空のオブジェクト {} です。これは、デフォルトの極座標系設定を使用することを意味します。 series構成アイテムは、グラフで使用されるシリーズ タイプを構成するために使用されます。ここでは、'散布'散布図シリーズを使用してデータを表示します。 coownedSystem 構成項目の値は 'polar' で、シリーズがデータの表示に極座標系を使用することを示します。 data設定項目は事前に用意したデータです。

5. カスタマイズされたスタイル

基本的な極座標系の構成に加えて、グラフのスタイルをカスタマイズすることもできます。以下は、一般的に使用されるカスタム構成の例です:

極座標系の半径範囲を調整します:

1. polar: {
     radius: ['20%', '80%']
   }

軸とスケールを追加します:

polar: {
  radiusAxis: {
    show: true,
    splitLine: {
      show: true
    },
    axisLine: {
      show: true
    }
  },
  angleAxis: {
    show: true,
    splitLine: {
      show: true
    },
    axisLine: {
      show: true
    }
  }
}

散布図のスタイルをカスタマイズする:

3. series: [{
     type: 'scatter',
     coordinateSystem: 'polar',
     data: data,
     symbol: 'circle',
     symbolSize: 10,
     itemStyle: {
       color: '#ff0000'
     }
   }]

6. 概要

この記事では、極座標系を使用して ECharts にデータを表示する方法と、いくつかの具体的なコード例を示します。この記事の紹介を通じて、読者が極座標系の構成と使用方法を習得し、実際のニーズに応じてカスタム スタイルを設定できることを願っています。設定オプションの詳細については、ECharts の公式ドキュメントを参照してください。