클릭과 선택

onPointClick — 지역 클릭 이벤트

{
    style: {
        cursor: 'pointer',
    },
    onPointClick: (args) => {
        console.log(args.source.id, args.value);
    },
}

데이터포인트가 연결된 지역을 클릭하면 호출된다. args.source가 그 지역에 연결된 데이터 객체다.
데이터가 연결되지 않은 지역에서는 호출되지 않는다. 모든 지역에서 받으려면 useMapData를 참고한다.
콜백이 명시적으로 true를 리턴하면 클릭의 기본 동작 (general.clickAction으로 지정한 동작)이 진행되지 않는다.
클릭한 지역의 상세 데이터를 그리드나 다른 차트에 표시하는 연동 시나리오의 출발점이 된다.

선택 — selectStyle과 select()/unselect()

selectStyle로 선택된 지역의 스타일을 지정하고, 시리즈의 select()/unselect() API로 선택 상태를 제어한다.

let prevPoint;
 
const config = {
    series: [
        {
            selectStyle: {
                stroke: '#5d5d5d',
                strokeWidth: 2,
            },
            onPointClick: (args) => {
                const map = args.chart.seriesByType('map');
                const point = map.pointById(args.source.id);
 
                if (prevPoint) {
                    map.unselect(prevPoint);
                }
                map.select(point);
 
                prevPoint = point;
            },
        },
    ],
};

pointById로 데이터의 id에 해당하는 데이터포인트를 찾아서 select/unselect에 넘긴다.
데이터에 id가 없어 mapKeys로 연결했다면 pointByProp('지도 속성명', 값)으로 찾는다. pointByProp은 데이터가 아니라 지도 소스 "properties"의 속성으로 찾는다는 점에 주의한다.
API로 선택하는 방식은 차트의 clickAction 설정과 무관하게 동작한다.
위 예처럼 클릭과 조합하면, 그리드의 행을 클릭해서 지도의 지역을 선택하는 식의 역방향 연동도 같은 API로 구현할 수 있다.

마우스 클릭만으로 선택되게 하려면 API 대신 차트의 general.clickAction을 'select'로(기본값 'none'), 시리즈의 selectable을 true로 지정한다.

클릭과 선택

onPointClick — 지역 클릭 이벤트

선택 — selectStyle과 select()/unselect()

See Also