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

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

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

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

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

次に、特定の幅と高さの <div># を追加します。 ECharts チャートに対応するために使用される ##要素:

<div id="chart" style="width: 600px; height: 400px;"></div>

次に、JavaScript コードで ECharts インスタンスを作成し、対応する DOM 要素を取得する必要があります:

var chart = echarts.init(document.getElementById('chart'));

3.データの準備

極座標系データを表示する前に、表示するデータを準備する必要があります。一連の 2 次元データがあるとします。各データは角度と半径の 2 つの値で構成されます。次のデータ構造を使用して保存できます:

var data = [
  [10, 50],
  [45, 80],
  [90, 70],
  // ...
];

4。データを表示するには極座標系を使用します。

次に、ECharts が提供する
polar 構成アイテムを使用して、極座標系を定義できます。 ECharts インスタンスを初期化した後、setOption メソッドを呼び出して、チャートの関連するスタイルとコンテンツを構成できます。

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

その中で、

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

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

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

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

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

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

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

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

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

6. 概要

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


以上が極座標系を使用して ECharts にデータを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。