Highcharts를 사용하여 히트맵을 만드는 방법

Highcharts는 히트 맵을 포함하여 다양한 유형의 차트를 만드는 데 사용할 수 있는 매우 인기 있는 JavaScript 차트 라이브러리입니다. 히트맵(Heat Map)은 데이터의 밀도를 나타내는 차트의 일종으로, 데이터 시각화에 널리 사용됩니다. 이 기사에서는 Highcharts를 사용하여 히트 맵을 생성하고 특정 코드 예제를 제공하는 방법을 소개합니다.

1. 데이터 준비

먼저 히트맵을 생성하기 위한 데이터를 준비해야 합니다. 히트맵은 2차원 데이터를 기반으로 하며, 각 데이터 포인트에는 X 및 Y 좌표와 해당 포인트의 밀도를 나타내는 값이 있습니다. 데이터는 일반적으로 다음과 같은 JSON 형식으로 제공됩니다.

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

여기서 첫 번째 열은 X축 좌표를 나타내고, 두 번째 열은 Y축 좌표를 나타내고, 세 번째 열은 밀도 값을 나타냅니다.

또한 X축과 Y축의 레이블과 히트맵의 제목을 결정해야 합니다.

2. 차트 컨테이너 만들기

다음으로 히트맵을 배치하기 위해 HTML 문서 내에 컨테이너를 만들어야 합니다. 이는 div 요소를 사용하여 수행할 수 있습니다:

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

3. Highcharts 라이브러리 소개

HTML 문서에 Highcharts 라이브러리를 도입해야 하며, 이는 다음과 같은 방법으로 수행할 수 있습니다.

<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: 이 옵션은 색상 축의 범위와 색상을 정의합니다.
• series: 이 옵션은 히트맵의 데이터를 정의합니다.

5. 차트 만들기

이제 Highcharts 개체의 Chart() 메서드를 사용하여 히트 맵을 만들 수 있습니다. 이 메서드에는 컨테이너 ID와 옵션 개체라는 두 가지 매개 변수가 필요합니다. 다음은 코드 예시입니다.

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

6. 히트맵 그리기

마지막으로 히트맵을 그리기 위해서는 아래와 같이 차트 객체의 redraw() 메소드를 호출해야 합니다.

chart.redraw();

이때, Highcharts Heatmap 프로세스를 사용하여 생성을 완료했습니다.

전체 샘플 코드는 다음과 같습니다.

<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>

위 내용은 Highcharts를 사용하여 히트맵을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!