[javascript] Highcharts에서 히트맵 만들기

27 Nov 2023

javascript

Highcharts는 훌륭한 차트 라이브러리이며, 다양한 유형의 차트를 생성할 수 있습니다. 이번에는 Highcharts를 사용하여 히트맵을 만드는 방법을 알아보겠습니다.

Highcharts 설치하기

Highcharts를 사용하기 위해 먼저 Highcharts 라이브러리를 다운로드하고 설치해야 합니다. Highcharts 공식 웹사이트에서 최신 버전의 라이브러리를 다운로드하거나, npm을 통해 설치할 수 있습니다.

브라우저에서 설치하기

<!-- Highcharts 라이브러리 스크립트 -->
<script src="https://code.highcharts.com/highcharts.js"></script>

npm으로 설치하기

npm install highcharts

히트맵 생성하기

Highcharts를 사용하여 히트맵을 생성하려면 다음 단계를 따르면 됩니다.

HTML 요소 준비하기

<!-- 차트를 그릴 컨테이너 -->
<div id="heatmapContainer"></div>

JavaScript 코드 작성하기

// 히트맵 데이터 정의
var heatmapData = [
    [0, 0, 10],
    [0, 1, 20],
    [0, 2, 30],
    [1, 0, 40],
    [1, 1, 50],
    [1, 2, 60],
    [2, 0, 70],
    [2, 1, 80],
    [2, 2, 90]
];

// Highcharts 히트맵 차트 생성
Highcharts.chart('heatmapContainer', {

    chart: {
        type: 'heatmap'
    },

    title: {
        text: '히트맵 차트'
    },

    xAxis: {
        categories: ['X1', 'X2', 'X3']
    },

    yAxis: {
        categories: ['Y1', 'Y2', 'Y3']
    },

    colorAxis: {
        min: 0,
        minColor: '#FFFFFF',
        maxColor: Highcharts.getOptions().colors[0]
    },

    series: [{
        name: '히트맵 데이터',
        data: heatmapData,
        dataLabels: {
            enabled: true,
            color: '#000000'
        }
    }]

});

위의 코드는 3x3 크기의 히트맵을 생성하는 예시입니다. heatmapData는 각 데이터의 좌표와 값을 포함하는 배열입니다. 이를 통해 히트맵을 생성하고 컬러 맵과 레이블을 설정합니다.

히트맵 확인하기

위의 코드를 실행하면 히트맵 차트가 생성되고 heatmapContainer라는 ID를 가진 HTML 요소에 표시됩니다. 웹 브라우저에서 확인하여 올바른 히트맵이 동작하는지 확인해보세요.

추가 설정 및 사용법

Highcharts를 사용하여 히트맵을 생성하는 방법을 간단히 살펴보았습니다. Highcharts에는 더 많은 설정 및 사용법이 있으며, 해당 문서를 참조하여 더 자세한 내용을 확인할 수 있습니다.