Highcharts는 데이터 시각화를 위한 강력한 JavaScript 라이브러리입니다. 데이터를 그래프나 차트로 표현할 때, 데이터 포맷을 적절히 조정하여 사용자에게 보기 좋은 형태로 제공하는 것이 중요합니다. 이번 글에서는 Highcharts에서 데이터 포매팅을 하는 방법에 대해 알아보겠습니다.

1. 숫자 데이터 포매팅하기

Highcharts에서 숫자 데이터의 포맷을 조정하는 방법은 다양합니다. 예를 들어, 세 자리마다 쉼표를 추가하거나 소수점 이하 자릿수를 조정하는 등의 작업을 할 수 있습니다.

Highcharts.setOptions({
    lang: {
        thousandsSep: ','
    }
});

var options = {
    series: [{
        data: [1000, 2000, 3000, 4000]
    }],
    yAxis: {
        labels: {
            format: '{value:,.0f}'
        }
    }
};

Highcharts.chart('container', options);

위의 예제에서는 thousandsSep 속성을 사용하여 세 자리마다 쉼표를 추가하도록 설정하였고, format 속성을 사용하여 y축 레이블의 포맷을 설정하였습니다. 여기서 ,.0f는 세 자리마다 쉼표를 추가하고 소수점 이하 자릿수를 없앤다는 의미입니다.

2. 날짜 데이터 포매팅하기

날짜 데이터를 그래프나 차트에 표현할 때 Highcharts는 자동으로 날짜 형식을 인식하지만, 원하는 형태로 포맷을 조정할 수도 있습니다.

var options = {
    series: [{
        data: [
            [Date.UTC(2022, 0, 1), 1000],
            [Date.UTC(2022, 0, 2), 2000],
            [Date.UTC(2022, 0, 3), 3000],
            [Date.UTC(2022, 0, 4), 4000]
        ]
    }],
    xAxis: {
        type: 'datetime',
        labels: {
            format: '{value:%m-%d}'
        }
    }
};

Highcharts.chart('container', options);

위의 예제에서는 format 속성을 사용하여 x축 레이블의 포맷을 설정하였습니다. {value:%m-%d}는 월과 일을 나타내는 형식으로 설정하였습니다.

3. 툴팁 데이터 포매팅하기

Highcharts에서는 툴팁을 통해 데이터의 상세 정보를 표시할 수 있습니다. 이때도 데이터 포맷을 조정해 사용자에게 보기 좋은 형태로 제공할 수 있습니다.

var options = {
    series: [{
        data: [1000, 2000, 3000, 4000]
    }],
    tooltip: {
        pointFormat: 'Value: {point.y:,.0f}'
    }
};

Highcharts.chart('container', options);

위의 예제에서는 pointFormat 속성을 사용하여 툴팁의 포맷을 설정하였습니다. {point.y:,.0f}는 데이터의 포맷을 설정하는 것으로, 세 자리마다 쉼표를 추가하고 소수점 이하 자릿수를 없애도록 설정하였습니다.

마무리

Highcharts에서 데이터 포매팅은 사용자에게 보기 좋은 형태로 데이터를 제공하는 데 있어 중요한 요소입니다. 숫자, 날짜, 툴팁 등 다양한 부분에서 포맷을 조정할 수 있으며, 위에서 소개한 방법들을 활용하여 데이터 시각화를 보다 효과적으로 구현할 수 있습니다.

더 자세한 정보는 Highcharts 공식 문서를 참고해주시기 바랍니다.