Highcharts는 강력한 JavaScript 차트 라이브러리로써, 다양한 종류의 차트를 만들 수 있습니다. 이 중에서도 행렬 차트는 데이터를 효과적으로 시각화할 수 있는 방법입니다.

Highcharts 설치하기

먼저 Highcharts를 사용하기 위해 Highcharts 라이브러리를 설치해야 합니다. 다음 명령을 사용하여 Highcharts를 설치할 수 있습니다.

npm install highcharts

행렬 차트 데이터 구성하기

행렬 차트를 만들기 위해서는 데이터를 적절하게 구성해야 합니다. 행렬 차트는 각 행의 요소를 열의 개수에 따라 시각화하는 방식입니다.

다음은 간단한 행렬 데이터의 예시입니다.

const data = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8]
];

Highcharts 행렬 차트 생성하기

Highcharts를 사용하여 행렬 차트를 생성하는 방법은 간단합니다. 다음은 Highcharts 행렬 차트를 생성하는 코드입니다.

import Highcharts from 'highcharts';

// 행렬 차트 생성
Highcharts.chart('container', {
  chart: {
    type: 'heatmap'
  },
  title: {
    text: '행렬 차트'
  },
  xAxis: {
    categories: ['열 1', '열 2', '열 3']
  },
  yAxis: {
    categories: ['행 1', '행 2', '행 3'],
    title: null
  },
  colorAxis: {
    min: 0,
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0]
  },
  series: [{
    name: '행렬 데이터',
    data: data,
    dataLabels: {
      enabled: true,
      color: '#000000'
    }
  }],
  legend: {
    enabled: false
  },
  credits: {
    enabled: false
  }
});

위 코드에서 data 변수에는 앞서 구성한 행렬 데이터가 할당되어 있습니다. chart 속성은 heatmap으로 설정하여 행렬 차트를 생성하도록 지정합니다.

또한, xAxis와 yAxis 속성은 각각 x축과 y축의 라벨을 설정합니다. categories 속성을 사용하여 라벨을 정의하고 있습니다.

colorAxis 속성은 색상 스케일을 제어하는 데 사용됩니다. min과 max 속성은 표시되는 색상의 범위를 지정하고, minColor와 maxColor는 색상의 최소값과 최대값을 설정합니다.

마지막으로, series 속성은 행렬 데이터와 데이터 라벨을 정의합니다.

결과 확인하기

위 코드를 실행하여 행렬 차트를 생성한 후, 결과를 확인할 수 있습니다. Label 옵션으로 설정한 행과 열의 라벨이 각각 x축과 y축에 표시되며, 데이터는 각 칸에 색상으로 표시됩니다.

위 글에서 사용된 Highcharts 코드는 Highcharts 공식 문서를 참고하여 작성되었습니다.