ホームページ > 記事 > ウェブフロントエンド > 散布図を使用して ECharts でデータの関係を表示する方法
散布図を使用して ECharts でデータの関係を表示する方法
- 王林オリジナル
- 2023-12-17 21:53:45847ブラウズ
散布図を使用して 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></script> タグを通じて ECharts ライブラリ ファイルを導入します。次に、<script></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 サイトの他の関連記事を参照してください。