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

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

1. データの準備

まず、ヒート マップを作成するためのデータを準備する必要があります。ヒートマップは 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 軸のラベル、およびヒート マップのタイトルも決定する必要があります。

2. チャート コンテナの作成

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

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

3. Highcharts ライブラリの紹介

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

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

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

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

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

次に、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: このオプションは、色軸の範囲と色を定義します。
• シリーズ: このオプションはヒート マップのデータを定義します。

5. チャートの作成

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

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

6. ヒート マップの描画

最後に、チャート オブジェクトの 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 サイトの他の関連記事を参照してください。