散布図マトリックス チャートを使用して ECharts でデータの関係を表示する方法

散布図を使用して ECharts のデータ関係を表示するには、特定のコード例が必要です

ECharts (エンタープライズ チャート) は、HTML5 Canvas に基づいて Baidu によって発売された製品です。豊富なチャート タイプと対話型機能を提供する、データ視覚化のためのオープン ソース ライブラリ。中でも散布図は、複数の変数間の関係を視覚的に表示できるデータ視覚化手法としてよく使われています。この記事では、ECharts で散布図を使用してデータの関係を表示する方法と、対応するコード例を紹介します。

1. データの準備
まず、表示するデータを準備する必要があります。 3 つの変数 X、Y、Z を含む単純なデータ セットがあり、各変数が特定の範囲内の値を取るとします。以下に示すように、配列を使用してこれらのデータを保存できます。

var data = [
  [1, 2, 3],
  [2, 3, 4],
  [3, 4, 5],
  // 更多数据...
];

この例では、各配列はデータ ポイントを表し、配列内の要素は変数 X、Y、そして順番にZ。

2. 散布マトリックス チャートを作成する
次に、ECharts を使用して散布マトリックス チャートを作成します。まず、以下に示すように、ECharts のリソース ファイルを導入する必要があります。

<script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>

次に、散布図マトリックス チャートに対応する <div> 要素を作成し、対応するスタイルを設定します。次に示すように、JavaScript コードを使用して EChart を初期化し、散布図のパラメーターを構成します。

<div id="scatterMatrix" style="width: 800px; height: 600px;"></div>

この例では、ECharts を使用します。 '

シリーズ タイプは散布図の作成に使用され、表示されるデータは data 属性を設定することで指定されます。同時に、symbolSize プロパティを設定して、散布点のサイズを調整します。 3. カスタマイズされた散布マトリックス チャート

color
属性を設定することで、さまざまなデータ ポイントに異なる色を指定できます。

var scatterMatrix = echarts.init(document.getElementById('scatterMatrix'));
var option = {
  tooltip: {},
  xAxis: {},
  yAxis: {},
  series: [{
    type: 'scatter',
    data: data,
    symbolSize: 10,
  }]
};
scatterMatrix.setOption(option);