ECharts 散布図 (多次元): データの関係と分布を表示する方法

ECharts 散布図 (多次元): データの関係と分布を表示する方法、具体的なコード例が必要です

はじめに:
データの分野視覚化、散布図 グラフは、さまざまな次元とデータの分布の間の関係を示すことができる一般的に使用されるグラフの種類です。 ECharts は、強力で柔軟な視覚化ライブラリとして、さまざまな種類の散布図の作成に使用できる豊富な関数と構成オプションを提供します。この記事では、ECharts を使用して散布図を作成する方法と、具体的なコード例を紹介します。

1. データの準備:
   まず、データのセットを準備する必要があります。このデータのセットには、x 座標、y 座標、色、サイズなどの複数の次元が含まれています。次のデータがあるとします。

var data = [
   {x: 10, y: 20, color: 'red', size: 5},
   {x: 15, y: 25, color: 'blue', size: 8},
   {x: 20, y: 30, color: 'green', size: 3},
   ...
];

2. グラフ コンテナを作成します。
   HTML ページで、グラフのコンテナとして div 要素を作成する必要があります。

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

3. ECharts インスタンスを初期化します:
   JavaScript コードで、ECharts ライブラリを導入し、チャート インスタンスを作成する必要があります:

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

4. Configureチャート オプション:
   次に、チャートのタイトル、軸、凡例、ツールヒントなど、チャートのいくつかのオプションを設定する必要があります。:

var option = {
   title: {
       text: '散点图示例'
   },
   xAxis: {},
   yAxis: {},
   series: [{
       type: 'scatter',
       data: data,
       symbolSize: function (data) {
           return data.size; // 设置散点的大小
       },
       itemStyle: {
           color: function (data) {
               return data.color; // 设置散点的颜色
           }
       }
   }]
};

その中で、系列は配列です。 、チャート内の系列を表します。ここでは散布図を意味する「散布図」を使用します。 data 属性はデータ ソースの設定に使用され、symbolSize 属性は散布点のサイズの設定に使用され、itemStyle 属性は散布点の色の設定に使用されます。

5. チャートをレンダリングします:
   最後に、構成されたチャート オプションを ECharts インスタンスに渡し、draw メソッドを呼び出してチャートをレンダリングする必要があります:

chart.setOption(option);

完了 コード例は次のとおりです。

var data = [
   {x: 10, y: 20, color: 'red', size: 5},
   {x: 15, y: 25, color: 'blue', size: 8},
   {x: 20, y: 30, color: 'green', size: 3},
   ...
];

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

var option = {
   title: {
       text: '散点图示例'
   },
   xAxis: {},
   yAxis: {},
   series: [{
       type: 'scatter',
       data: data,
       symbolSize: function (data) {
           return data.size;
       },
       itemStyle: {
           color: function (data) {
               return data.color;
           }
       }
   }]
};

chart.setOption(option);

上記のコード例を使用すると、単純な散布図を簡単に作成し、データの次元に従ってデータの関係と分布を表示できます。同時に、ECharts は、カスタマイズされたチャート表示効果のためのより豊富な構成オプションと対話型機能も提供します。この記事が、読者が EChart をより効果的に使用して散布図を作成し、データ視覚化作業に利便性と利点をもたらすのに役立つことを願っています。

結論:
この記事では、ECharts を使用して散布図を作成する方法を紹介し、具体的なコード例を示します。 ECharts の豊富な機能と構成オプションを使用することで、複数のディメンションにわたる関係とデータ分散を簡単に実証できます。この記事の紹介を通じて、読者が ECharts をより適切に使用してデータ視覚化のニーズを実現できることを願っています。

以上がECharts 散布図 (多次元): データの関係と分布を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。