[javascript] Highcharts에서 차트에서 선택된 데이터 포인트 변경하기

27 Nov 2023

javascript

Highcharts는 JavaScript로 작성된 인기있는 차트 라이브러리입니다. 이 라이브러리를 사용하면 다양한 유형의 차트를 생성하고 사용자가 인터랙티브하게 상호작용할 수 있습니다. 이번 포스트에서는 Highcharts에서 선택된 데이터 포인트를 변경하는 방법에 대해 알아보겠습니다.

1. 선택된 데이터 포인트 확인하기

Highcharts에서 선택된 데이터 포인트를 확인하려면 chart.selectionMarker 속성을 사용합니다. 이 속성은 현재 선택된 데이터 포인트의 위치를 나타내는 객체입니다. 선택된 데이터 포인트가 없으면 null입니다.

const chart = Highcharts.chart('container', {
    series: [{
        data: [10, 20, 30, 40, 50]
    }]
});

// 데이터 포인트 클릭 이벤트 리스너 등록
chart.series[0].points.forEach(point => {
    point.on('click', () => {
        const selectedPoint = chart.selectionMarker;
        
        if (selectedPoint) {
            // 선택된 데이터 포인트가 있을 때의 처리 로직
            console.log('선택된 데이터 포인트:', selectedPoint);
        } else {
            // 선택된 데이터 포인트가 없을 때의 처리 로직
            console.log('선택된 데이터 포인트 없음');
        }
    });
});

2. 선택된 데이터 포인트 변경하기

Highcharts에서 선택된 데이터 포인트를 변경하려면 point.update 메서드를 사용합니다. 이 메서드는 선택된 데이터 포인트를 업데이트하고 차트에 반영합니다.

const chart = Highcharts.chart('container', {
    series: [{
        data: [10, 20, 30, 40, 50]
    }]
});

// 데이터 포인트 클릭 이벤트 리스너 등록
chart.series[0].points.forEach(point => {
    point.on('click', () => {
        const selectedPoint = chart.selectionMarker;
        
        if (selectedPoint) {
            // 선택된 데이터 포인트가 있을 때의 처리 로직
            const newValue = 100; // 변경할 값
            
            selectedPoint.update(newValue);
            
            console.log('데이터 포인트 변경:', selectedPoint);
        } else {
            // 선택된 데이터 포인트가 없을 때의 처리 로직
            console.log('선택된 데이터 포인트 없음');
        }
    });
});

위의 예제에서는 선택된 데이터 포인트가 있을 때 selectedPoint.update(newValue)를 호출하여 데이터 포인트의 값을 변경하고 있습니다. 변경 후에는 변경된 데이터 포인트를 console.log로 출력해 확인할 수 있습니다.

결론

Highcharts를 사용하여 생성한 차트에서 선택된 데이터 포인트를 변경하는 방법에 대해 알아보았습니다. 선택된 데이터 포인트를 확인하고 변경함으로써 사용자에게 다양한 상호작용 기능을 제공할 수 있습니다. Highcharts의 다른 기능과 함께 활용하여 보다 유연하고 풍부한 시각화를 구현해보세요.

참고 자료: