ホームページ >ウェブフロントエンド >jsチュートリアル >散布図を使用してハイチャートにデータを表示する方法
散布図を使用してハイチャートにデータを表示する方法
- WBOYオリジナル
- 2023-12-17 22:30:321076ブラウズ
散布図を使用して Highcharts にデータを表示する方法
はじめに
Highcharts は、豊富な種類のグラフと強力なカスタマイズ機能を提供するオープン ソースの JavaScript グラフ ライブラリです。中でも散布図は、2 つの変数間の関係や変数の分布を示すことができる、一般的に使用されるデータ視覚化手法です。この記事では、散布図を使用してデータをハイチャートに表示する方法を紹介し、具体的なコード例を示します。
ステップ 1: Highcharts ライブラリ ファイルをインポートする
まず、Highcharts ライブラリ ファイルを HTML ファイルに導入する必要があります。これらのファイルは CDN を使用してインポートできます。コードは次のとおりです。
<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/highcharts@8.2.2/highcharts.js"></script> </head> <body> <div id="container"></div> </body> </html>
ステップ 2: データの準備
散布図を使用する前に、データのセットを準備する必要があります。データは 2 次元配列にすることができます。各要素には、水平軸と垂直軸の座標を表す 2 つの値が含まれます。サンプル データは次のとおりです:
var data = [ [1, 5], [2, 10], [3, 15], [4, 20], [5, 25] ];
ステップ 3: 散布図を作成する
次に、Highcharts ライブラリの API を使用して散布図を作成します。チャートのパラメーターを指定するには、構成オブジェクトを渡す必要があります。サンプル コードは次のとおりです:
Highcharts.chart('container', {
chart: {
type: 'scatter'
},
title: {
text: '散点图'
},
xAxis: {
title: {
text: '横轴标题'
}
},
yAxis: {
title: {
text: '纵轴标题'
}
},
series: [{
name: '散点数据',
data: data
}]
});上記のコードでは、チャートの種類を散布図 (散布図) として指定し、タイトルを設定しました、横軸と縦軸、軸のタイトル。データ配列を渡すことにより、データを散布図にプロットします。
ステップ 4: 他のオプションを構成する
Highcharts には、グラフのスタイルと対話をさらにカスタマイズするために使用できる豊富なオプションと構成が用意されています。一般的に使用されるオプションの一部を以下に示します。
- Color: シリーズ オブジェクトの color プロパティを設定することで、散布点の色を指定できます。
- サイズ: シリーズ オブジェクトのマーカー属性を設定することで、散布点のサイズを指定できます。
- Label: series オブジェクトの dataLabels プロパティを設定することで、散布点ラベルを追加できます。
Highcharts.chart('container', {
chart: {
type: 'scatter'
},
title: {
text: '散点图'
},
xAxis: {
title: {
text: '横轴标题'
}
},
yAxis: {
title: {
text: '纵轴标题'
}
},
series: [{
name: '散点数据',
data: data,
color: 'blue',
marker: {
symbol: 'circle',
radius: 5
},
dataLabels: {
enabled: true,
format: '{point.y}',
style: {
color: 'black'
}
}
}]
});上記のコードは、散布点の色を青に設定し、サイズを半径 5 の円に設定し、散布点にデータ ラベルを追加します。
結論
この記事では、散布図を使用してデータをハイチャートに表示する方法を紹介し、具体的なコード例を示します。 Highcharts ライブラリ ファイルの導入、データの準備、散布図の作成、その他のオプションの構成により、データを柔軟にカスタマイズして表示できます。この記事が、ハイチャートを使用して散布図を描くときに役立つことを願っています。
以上が散布図を使用してハイチャートにデータを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。