에셋(Assets)

시리즈나 게이지 또는 축 label 등을 효과적으로 표시할 때 참조하는 미리 정의된 스타일 요소들이다.

Color List

차트 설정에서 에셋 type은 'colors'이다.
사용할 색상 목록을 보관하고 실행 중 series.pointColors 등에서 사용할 수 있도록 한다.

최상위 'asset' 항목의 자식 아이템으로 설정한다.

{
    assets: [{
        type: 'colors',
        id: 'color1',
        colors: ['#88f', '#aaf', '#bbf', '#ddf', '#eef'],
        mode: 'suffle'
    }],
    series: {
        pointsColors: 'color1',
    }
}

'type'이 지정되지 않고, 'colors' 배열이 존재하면 'colors'로 생성된다.

Try Color List

Image List

에셋 type은 'images'이다.

Linear Gradient

에셋 type은 'lineargradient'이다.
시작점과 끝점 사이에 색상이 서서히 변경되는 효과를 표시한다. 채우기 색이나 선 색으로 사용될 수 있다.

{
    assets: [{
        type: 'lineargradient',
        id: 'gradient-1',
        color: '#0088ff',
        opacity: [1, 0]
    }],
    series: {
        style: {
            fill: 'url(#gradient-1)',
            fillOpacity: 1,
            strokeWidth: '2px'
        }
    }
}

Try Linear Gradient

Radial Gradient

에셋 type은 'radialgradient'이다.
원 중심에서 바깥으로 생상이 변해가는 효과를 표시한다. 채우기 색이나 선 색으로 사용될 수 있다.

{
    assets: [{
        type: 'radialgradient',
        id: 'gradient-1',
        color: '#0088ff',
        cx: 0.3,
        cy: 0.3,
        rd: 0.4
    }],
    series: {
        type: 'bubble',
        style: {
            fill: 'url(#gradient-1)'
        }
    }
}

Try Radial Gradient

Pattern

에셋 type은 'pattern'이다.
도형 패턴을 지정해서 채우기(fill) 색상 대신 사용할 수 있다.

{
    assets: [{
        type: 'pattern',
        id: 'pattern-1',
        pattern: 0,
        style: {
            stroke: 'black',
        }
    }],
    series: {
        style: {
            fill: 'url(#pattern-1)'
        }
    }
}

Try Pattern