[javascript] Chartist에서 차트의 데이터 히트맵 추가하기

01 Dec 2023

javascript

Charist는 유명한 JavaScript 기반 차트 라이브러리입니다. 이 라이브러리는 간편한 사용법과 다양한 차트 유형을 제공하여 데이터 시각화 작업을 도와줍니다.

이번 글에서는 Chartist 차트에 데이터 히트맵을 추가하는 방법을 소개하겠습니다.

1. Chartist 설치

Charist를 사용하기 위해 먼저 해당 라이브러리를 설치해야 합니다. 다음 명령을 사용하여 npm을 통해 Chartist를 설치합니다.

npm install chartist

2. 히트맵 데이터 준비하기

히트맵을 차트에 추가하기 전에 데이터를 준비해야 합니다. 히트맵은 특정 데이터 포인트의 밀도를 시각적으로 표현하는데 사용되므로, 데이터는 X, Y 좌표와 해당 좌표의 값으로 구성되어야 합니다.

예를 들어, 다음과 같은 형식의 데이터를 준비할 수 있습니다.

const heatmapData = [
  { x: 0, y: 0, value: 10 },
  { x: 1, y: 0, value: 5 },
  { x: 0, y: 1, value: 8 },
  { x: 1, y: 1, value: 12 },
];

이 경우, 각 객체는 X, Y 좌표와 해당 좌표의 값으로 구성되어 있습니다.

3. Chartist 차트 생성하기

Charist 차트를 생성하고 히트맵 데이터를 추가하는 방법을 알아보겠습니다. 다음 코드를 보면서 각 단계를 따라 해보세요.

const chart = new Chartist.Line('.ct-chart', {}, {
  plugins: [
    Chartist.plugins.tooltip()
  ]
});

const series = heatmapData.map(data => ({
  x: data.x,
  y: data.y,
  value: data.value
}));

const heatMapOptions = {
  low: 0,
  high: 15,
  showArea: true,
  areaRange: [
    { from: 0, to: 5, className: 'low' },
    { from: 5, to: 10, className: 'medium' },
    { from: 10, to: 15, className: 'high' }
  ]
};

chart.pluginService.register({
  afterDraw: function (chart) {
    if (chart instanceof Chartist.Line) {
      chart.svg.attr({
        class: 'ct-chart-heatmap'
      });

      chart.data.series.forEach((series, index) => {
        series.forEach((item) => {
          const rectHeight = chart.options.axisY.bounds.height() / chart.data.series[index].length;
          chart.svg.elem('rect', {
            x: item.axisX.axis.units.scale(item.axisX.value) + chart.options.axisX.offset,
            y: item.axisY.axis.units.scale(item.axisY.value) - rectHeight / 2,
            width: 10,
            height: rectHeight
          }, chart.options.high ? `ct-high` : `ct-low`);
        });
      });
    }
  }
});

위의 코드에서는 Line 차트를 생성하고, tooltip 플러그인을 추가한 다음, 히트맵 데이터로 series를 생성합니다. 이후, 히트맵을 위한 옵션을 설정하고, 차트에 히트맵을 추가하는 로직을 구현합니다.

히트맵을 생성하기 위해서는 afterDraw 함수를 사용하여 차트 객체의 SVG 엘리먼트에 히트맵 데이터를 추가합니다.

4. 스타일링

마지막으로 히트맵의 스타일을 설정해야 합니다. 위의 코드에서는 low, medium, high 클래스를 사용하여 각 범위마다 다른 스타일을 적용하였습니다. CSS를 이용하여 해당 클래스의 스타일을 정의할 수 있습니다.

.ct-low {
  fill: green;
}

.ct-medium {
  fill: yellow;
}

.ct-high {
  fill: red;
}

이제 Chartist 차트에 데이터 히트맵을 추가하기 위한 단계를 모두 마쳤습니다. 코드를 실행하여 원하는 결과를 확인하세요.

1. Chartist 설치

2. 히트맵 데이터 준비하기

3. Chartist 차트 생성하기

4. 스타일링

참고 자료