ハイチャートを使用してヒートマップを作成する方法-jsチュートリアル-php.cn

ハイチャートを使用してヒートマップを作成する方法

PHPz

リリース： 2023-12-17 10:03:23

オリジナル

1291 人が閲覧しました

ハイチャートを使用してヒートマップを作成する方法

Highcharts は、ヒートマップなどのさまざまな種類のグラフの作成に使用できる、非常に人気のある JavaScript グラフ作成ライブラリです。ヒートマップはデータ密度を表すチャートの一種で、データの視覚化に広く使用されています。この記事では、Highcharts を使用してヒートマップを作成する方法を紹介し、具体的なコード例を示します。

データの準備

まず、ヒートマップを作成するためのデータを準備する必要があります。ヒートマップは 2 次元データに基づいており、各データポイントには X 座標と Y 座標、およびそのポイントの密度を表す値が含まれます。データは通常、JSON 形式で提供されます。例:

var data = [
  [0, 0, 10],
  [0, 1, 19],
  [0, 2, 8],
  [0, 3, 24],
  [0, 4, 67],
  ...
];

ログイン後にコピー

ここで、最初の列は X 軸座標を表し、2 列目は Y 軸座標を表し、3 列目は密度値を表します。

X 軸と Y 軸のラベル、およびヒートマップのタイトルも決定する必要があります。

チャートコンテナの作成

次に、ヒートマップを配置するためのコンテナを HTML ドキュメント内に作成する必要があります。これは、div 要素を使用して実行できます。

<div id="container"></div>

ログイン後にコピー

Highcharts ライブラリの紹介

Highcharts ライブラリを HTML ドキュメントに導入する必要があります。これは、次の方法:

<script src="https://code.highcharts.com/highcharts.js"></script>

ログイン後にコピー

ヒートマップモジュールを使用してヒートマップを作成したい場合は、ヒートマップモジュールも導入する必要があります:

<script src="https://code.highcharts.com/modules/heatmap.js"></script>

ログイン後にコピー

チャートオプションの構成

次に、Highcharts オブジェクトオプションを設定して、ヒートマップのレンダリング方法を指示する必要があります。これらのオプションは、「オプションオブジェクト」と呼ばれる JavaScript オブジェクトとして定義されます。以下は基本的なオプションオブジェクトです:

var options = {
  chart: {
    type: 'heatmap',
    marginTop: 40,
    marginBottom: 80,
    plotBorderWidth: 1
  },
  title: {
    text: 'My Heatmap'
  },
  xAxis: {
    categories: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5'],
    title: {
      text: 'X Axis'
    }
  },
  yAxis: {
    categories: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5'],
    title: {
      text: 'Y Axis'
    }
  },
  colorAxis: {
    min: 0,
    max: 100,
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0]
  },
  series: [{
    name: 'My Data',
    borderWidth: 1,
    data: data,
    dataLabels: {
      enabled: true,
      color: '#000000'
    }
  }]
};

ログイン後にコピー

上記のオプションオブジェクトのいくつかの主要なオプションは次のように説明されています:

chart: このオプションは、Highcharts にヒートマップを作成することを指示します。ヒートマップの境界線の幅とマージンを指定します。
title: このオプションはヒートマップのタイトルを指定します。
xAxis および yAxis: これらのオプションは、X 軸と Y 軸のラベルを定義します。
colorAxis: このオプションは、色軸の範囲と色を定義します。
シリーズ: このオプションはヒートマップのデータを定義します。

チャートの作成

ここで、Highcharts オブジェクトの chart() メソッドを使用してヒートマップを作成できます。このメソッドには、コンテナーの ID とオプションオブジェクトの 2 つのパラメーターが必要です。以下はコード例です:

var chart = Highcharts.chart('container', options);

ログイン後にコピー

ヒートマップの描画

最後に、チャートオブジェクトの redraw() メソッドを呼び出してヒートマップを描画する必要があります。

chart.redraw();

ログイン後にコピー

ここまでで、ハイチャートを使用してヒートマップを作成するプロセスが完了しました。

完全なサンプルコードは次のとおりです:

<div id="container"></div>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>

<script>
  var data = [
    [0, 0, 10],
    [0, 1, 19],
    [0, 2, 8],
    [0, 3, 24],
    [0, 4, 67],
    ...
  ];

  var options = {
    chart: {
      type: 'heatmap',
      marginTop: 40,
      marginBottom: 80,
      plotBorderWidth: 1
    },
    title: {
      text: 'My Heatmap'
    },
    xAxis: {
      categories: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5'],
      title: {
        text: 'X Axis'
      }
    },
    yAxis: {
      categories: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5'],
      title: {
        text: 'Y Axis'
      }
    },
    colorAxis: {
      min: 0,
      max: 100,
      minColor: '#FFFFFF',
      maxColor: Highcharts.getOptions().colors[0]
    },
    series: [{
      name: 'My Data',
      borderWidth: 1,
      data: data,
      dataLabels: {
        enabled: true,
        color: '#000000'
      }
    }]
  };

  var chart = Highcharts.chart('container', options);
  chart.redraw();
</script>

ログイン後にコピー

以上がハイチャートを使用してヒートマップを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。