散布図を使用して ECharts でデータの関係を表示する方法-jsチュートリアル-php.cn

散布図を使用して ECharts でデータの関係を表示する方法

王林

リリース： 2023-12-17 21:53:45

オリジナル

907 人が閲覧しました

散布図を使用して ECharts でデータの関係を表示する方法

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

ECharts は、豊富な種類のグラフを提供するオープンソースのデータ視覚化ライブラリです。データを表示します。中でも散布図はデータを表示する方法としてよく使われており、データ点の位置を座標系で表現することでデータ間の関係を視覚的に表示することができます。この記事では、散布図を使用して EChart でデータの関係を表示する方法を紹介し、具体的なコード例を示します。

まず、ECharts を使用して散布図を描画するには、ECharts ライブラリファイルを HTML ページに導入する必要があります。これは、次の手順で導入できます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>使用散点图展示数据关系</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
</head>
<body>
  <div id="scatterChart" style="width: 600px; height: 400px"></div>
  <script src="scatter.js"></script>
</body>
</html>

ログイン後にコピー

HTML で div 要素を作成し、それに JavaScript で使用する ID を割り当てます。次に、<script> タグを通じて ECharts ライブラリファイルを導入します。次に、<script> タグを使用して、散布図を描画するための scatter.js という名前の JavaScript ファイルを導入します。

scatter.js ファイルでは、散布図を描画するための特定のコードを記述することができます。まず、div 要素への参照を取得する必要があります。

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

ログイン後にコピー

次に、表示する必要があるデータを定義します。単純な 2 次元の散布図を例に挙げると、複数のデータポイントを含む配列を定義できます。

var data = [
  [10, 4],
  [15, 10],
  [7, 8],
  [20, 14],
  // 更多数据点...
];

ログイン後にコピー

次に、ECharts が提供するオプション設定項目を通じて散布図のスタイルとデータを設定できます。。まず、オプションの初期値として空のオブジェクトを定義する必要があります:

var option = {};

ログイン後にコピー

次に、座標軸、データポイントスタイル、ここでは、x を設定します。例として、軸と y 軸のスケール範囲と名前を取り上げます。

option = {
  xAxis: {
    type: 'value',
    min: 0,
    max: 25,
    name: 'X轴'
  },
  yAxis: {
    type: 'value',
    min: 0,
    max: 15,
    name: 'Y轴'
  },
  series: [{
    type: 'scatter',
    data: data
  }]
};

ログイン後にコピー

上記のコードで、散布図が描画されました。最後に、setOption メソッドを使用して構成をグラフに適用し、散布図の表示を完了します:

scatterChart.setOption(option);

ログイン後にコピー

要約すると、上記のコードは、ECharts で散布図を描画し、データの関係を表示する関数を実装します。 ECharts ライブラリファイルを導入し、対応する HTML ページを作成し、JavaScript ファイルで散布図のスタイルとデータを構成することで、散布図を描画できます。この記事で提供されているコード例が、読者が散布図を使用して ECharts でデータの関係を表示する方法をよりよく理解するのに役立つことを願っています。

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