Highcharts는 데이터 시각화를 위한 JavaScript 라이브러리로 많이 사용됩니다. 데이터 포인트에 있는 라벨을 특정 형식으로 포매팅하고 싶을 때가 있습니다. 예를 들어, 천 단위로 쉼표를 추가하거나, 소수점 아래 자릿수를 제한하거나, 퍼센트로 표시하거나 등등 다양한 방식으로 라벨을 포매팅할 수 있습니다.

포매팅 옵션

Highcharts에서 데이터 라벨을 포매팅하기 위해 formatter 옵션을 사용합니다. formatter 함수는 각 데이터 포인트의 라벨을 포매팅하는데 사용됩니다. 이 함수는 데이터 포인트 this와 현재 소수점 위치 decimalPlaces를 인수로 받습니다.

formatter: function() {
  // 데이터 포인트에 대한 포매팅 로직 작성
  // this.value는 현재 데이터 포인트의 값입니다.
}

예제: 천 단위로 쉼표 추가하기

먼저, 데이터 포인트의 값에 천 단위로 쉼표를 추가하는 예제를 살펴보겠습니다.

// 데이터 포인트의 값이 1234567 이라고 가정합니다.
formatter: function() {
  return this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

위의 코드에서는 replace 메서드와 정규식을 사용하여 숫자를 천 단위로 나누고 각 부분 사이에 쉼표를 추가합니다. 결과적으로 데이터 포인트의 값을 1,234,567로 표시하게 됩니다.

예제: 소수점 아래 자릿수 제한하기

다음으로, 데이터 포인트의 값에 소수점 아래 자릿수를 제한하는 예제를 살펴보겠습니다.

// 데이터 포인트의 값이 3.141592653589793 이라고 가정합니다.
formatter: function() {
  return this.value.toFixed(2);
}

위의 코드에서는 toFixed 메서드를 사용하여 숫자를 소수점 아래 두 자릿수로 제한합니다. 결과적으로 데이터 포인트의 값을 3.14로 표시하게 됩니다.

예제: 퍼센트로 표시하기

마지막으로, 데이터 포인트를 백분율로 표시하는 예제를 살펴보겠습니다.

// 데이터 포인트의 값이 0.75라고 가정합니다.
formatter: function() {
  return this.value * 100 + '%';
}

위의 코드에서는 데이터 포인트의 값을 100을 곱한 후 ‘%’ 기호를 추가하여 퍼센트로 표시합니다. 따라서 데이터 포인트의 값을 75%로 표시하게 됩니다.

결론

Highcharts에서 데이터 라벨을 포매팅하는 방법을 살펴보았습니다. formatter 옵션을 사용하여 각 데이터 포인트의 라벨을 원하는 형식으로 조정할 수 있습니다. 위의 예제 코드를 참고하여 적절한 포매팅 옵션을 사용하여 데이터 라벨을 원하는 대로 변경해보세요.

참고 자료

• Highcharts API 문서 - Data Labels
• MDN Web Docs - toFixed()
• MDN Web Docs - replace()
• Regex101 - 정규식 테스트