散布図を使用してハイチャートにデータを表示する方法-jsチュートリアル-php.cn

散布図を使用してハイチャートにデータを表示する方法

WBOY

リリース： 2023-12-17 22:30:32

オリジナル

1077 人が閲覧しました

散布図を使用してハイチャートにデータを表示する方法

散布図を使用して 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 サイトの他の関連記事を参照してください。