스타일과 Hover
style과 nullStyle
{
style: {
stroke: '#fff',
strokeWidth: 0.5,
},
nullStyle: {
stroke: '#2f4279',
fill: '#e0ebf9',
},
}style은 데이터가 연결된 지역의 스타일이다.nullStyle은 데이터가 연결되지 않은 지역의 스타일이다.- 데이터 없이 지도를 배경으로만 쓰는 시리즈라면 모든 지역이 데이터가 연결되지 않은 상태이므로,
nullStyle하나로 지도 전체의 스타일을 정할 수 있다.
hoverColor와 hoverStyle
마우스가 올라간 지역에 적용할 스타일을 지정한다.
{
hoverStyle: {
stroke: 'black',
strokeWidth: 1,
filter: 'brightness(1.05)',
},
}색만 바꾸면 되는 경우 hoverColor로 간단히 지정할 수 있다.
{
hoverColor: '#83A8DC',
}hoverColor는hoverStyle보다 우선한다.- 둘 다 지정하지 않으면 기본 hover 효과가 적용된다.
nullHovering — 데이터 없는 지역의 hover
데이터가 연결되지 않은 지역은 기본적으로 hover 효과와 툴팁이 표시되지 않는다.
nullHovering을 true로 지정하면 이런 지역에도 hover 효과가 표시된다.
{
nullHovering: true,
nullStyle: {
fill: '#D2DEEC',
},
}