축(Axis)
axis 옵션 모델을 통해, 위/경도선의 간격과 스타일, 축 가이드 표시에 관한 속성들을 설정한다.
Grid
지도에 위/경도를 어떻게 표시할 지를 지정한다. 기본적으로는 표시되 않고, 위/경도선을 다른 스타일로 표시할 수도 있다.
설정
const config = {
axis: {
grid: {
visible: true,
line: { step: 5 },
lonLine: { style: {stroke: 'red' } }
}
},
};Guides
위 경도를 기준으로 가이드 'line'이나 'band', 또는 'range'를 표시할 수 있다.
설정
차트 axis 설정 아래 guide 항목으로 설정한다.
const config = {
axis: {
guide: [
{
type: 'line',
axis: 'lon',
position: 127,
style: {
stroke: 'red',
strokeWidth: '2px',
strokeDasharray: '2',
},
label: {
text: 'Line lon 127',
},
},
{
type: 'band',
axis: 'lat',
from: -20,
to: -60,
style: {
stroke: '#00880080',
strokeDasharray: '1',
strokeWidth: '1px',
fill: '#00880010',
},
label: {
text: 'Band Guide 1',
},
},
{
type: 'range',
from: [20, -20],
to: [40, -60],
style: {
stroke: '#00008880',
strokeWidth: '1px',
fill: '#00008810',
},
label: {
text: 'Range Guide 2',
},
},
],
},
};Crosshair
현재 마우스가 위치한 지점의 위/경도를 표시한다.
설정
차트 axis 설정 아래 crosshair 항목으로 설정한다.
const config = {
axis: {
crosshair: true
},
};