[javascript] Highcharts에서 데이터 필터링하기

Highcharts는 JavaScript로 구현된 데이터 시각화 라이브러리입니다. 데이터 시각화를 위한 다양한 옵션과 기능을 제공하며, 데이터 필터링은 그 중 하나입니다. 데이터 필터링을 통해 사용자는 시각화된 데이터를 원하는 조건에 맞게 필터링할 수 있습니다.

데이터 필터링 옵션

Highcharts에서 데이터 필터링을 위해서는 data 속성과 함께 filter 속성을 사용해야 합니다. filter 속성은 사용자 정의 함수를 값으로 받으며, 이 함수는 필터링 조건을 설정하는 로직을 포함해야 합니다.

Highcharts.chart('container', {
  series: [{
    data: [1, 2, 3, 4, 5],
    filter: function () {
      // 필터링 로직 작성
    }
  }]
});

예시: 최소값 이상만 필터링하기

아래 예시는 데이터에서 최소값 이상인 값만 필터링하여 시각화하는 코드입니다.

Highcharts.chart('container', {
  series: [{
    data: [1, 2, 3, 4, 5],
    filter: function (point) {
      return point >= Math.min.apply(null, this.chart.series[0].options.data);
    }
  }]
});

위 코드에서는 filter 함수의 매개변수로 현재 포인트 값을 받아와서, 이 값이 최소값 이상인지 확인합니다. 최소값은 Math.min.apply 함수를 사용하여 데이터 배열의 최소값을 얻어옵니다.

참고 자료