색상

지역의 색상을 정하는 방법은 세 가지다. 데이터에 색을 직접 지정하거나(color 속성), 시리즈에서 일괄 지정하거나(pointColors), 값 구간에 따라 자동으로 칠한다(컬러스케일).

데이터의 color 속성

{
    data: [
        { id: '11', value: 10, color: '#a4c6ec' },
        { id: '31', value: 20, color: '#78a9e2' },
        { id: '32', value: 30, color: '#6794dc' },
    ]
}

맵 시리즈는 데이터의 color 속성을 읽고 해당 지역의 색상을 결정한다.
color 속성이 없는 경우 style, nullStyle에 의해 지역 색상이 결정된다. 이것도 없으면 기본 색상이 적용된다.
툴팁에도 해당 색상이 표시된다.

pointColors

color 속성이 없는 데이터포인트들의 색을 시리즈에서 지정한다. 색 배열이나 콜백으로 지정할 수 있고, style이나 color로 지정한 색보다 우선한다.

콜백으로 지정하면 데이터포인트마다 색을 결정할 수 있다.

{
    // 인구가 늘어난 지역은 파란색, 줄어든 지역은 빨간색.
    pointColors: (args) => {
        const { prev, curr } = args.source;
        return curr >= prev ? '#78a9e2' : '#ff5757';
    },
}

색 배열로 지정하면 데이터포인트 순서대로 돌아가며 적용된다. asset으로 등록한 패턴이나 그라데이션을 'url(#아이디)' 형식으로 지정할 수도 있다.

{
    asset: [
        { type: 'pattern', id: 'pattern-0', pattern: 0 },
        { type: 'pattern', id: 'pattern-1', pattern: 1 },
    ],
    series: [
        {
            pointColors: ['url(#pattern-0)', 'url(#pattern-1)'],
        },
    ],
}

컬러스케일 연동

차트에 colorScale을 정의하면 맵 시리즈에 자동으로 연결되어, 각 지역이 value에 해당하는 컬러스케일 색으로 칠해진다. 시리즈 쪽에는 별도의 설정이 필요 없다.

{
    colorScale: {
        steps: [
            { from: 0,    to: 50,   color: '#d5deef' },
            { from: 50,   to: 250,  color: '#b1c9ef' },
            { from: 250,            color: '#395886' },
        ],
    },
    series: [
        {
            dataUrl: '/assets/data/kr-sigun-population-density.json',
        },
    ],
}

연결을 끊으려면 시리즈에 colorScale: null을 지정한다. 라벨 표시용 시리즈처럼 컬러스케일 채색이 필요 없는 시리즈를 함께 쓸 때 사용한다.
컬러스케일 자체의 설정(구간, 색, 위치)과 시리즈 연결 규칙의 상세는 색상자(Color Scale) 가이드를 참고한다.

색상

데이터의 color 속성

pointColors

컬러스케일 연동

See Also