散布図マトリックス チャートを使用して 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 を初期化し、散布図のパラメーターを構成します。 <pre class='brush:html;toolbar:false;'>&lt;div id=&quot;scatterMatrix&quot; style=&quot;width: 800px; height: 600px;&quot;&gt;&lt;/div&gt;</pre><p> この例では、ECharts を使用します。 ' </p>scatter<p> シリーズ タイプは散布図の作成に使用され、表示されるデータは <code>data 属性を設定することで指定されます。同時に、symbolSize プロパティを設定して、散布点のサイズを調整します。 3. カスタマイズされた散布マトリックス チャート

基本的な散布マトリックス チャートに加えて、ECharts には散布点のスタイル、色などをカスタマイズできる豊富な設定項目も用意されています。たとえば、

color
属性を設定することで、さまざまなデータ ポイントに異なる色を指定できます。 <pre class='brush:javascript;toolbar:false;'>var scatterMatrix = echarts.init(document.getElementById('scatterMatrix')); var option = { tooltip: {}, xAxis: {}, yAxis: {}, series: [{ type: 'scatter', data: data, symbolSize: 10, }] }; scatterMatrix.setOption(option);</pre> この例では、変数の値に基づいてデータ ポイントの色を設定します。 Z、[0,3)の範囲の値を持つデータを赤に設定し、[3,6)の範囲の値を持つデータを青に設定し、その他のデータを緑に設定します。

4. 概要

この記事では、散布図マトリックス チャートを使用して EChart 内のデータ関係を表示する方法を紹介し、対応するコード例を示します。基本的な散布マトリックス チャートに加えて、ECharts には豊富な設定項目が用意されており、さまざまなニーズに合わせて散布点のスタイル、色などをカスタマイズできます。 ECharts を使用すると、さまざまなタイプのデータ視覚化チャートを迅速かつ柔軟に作成でき、データの理解と分析が容易になります。