시리즈 공통 속성
리얼맵차트 시리즈의 공통 속성에 대한 설명입니다.
Basic
| 이름 | 타입 | 설명 | 필수여부 |
|---|---|---|---|
| Visible | boolean | 시리즈의 표시 여부를 설정합니다. | yes |
| Type | string | 시리즈의 타입을 보여줍니다. | yes |
| Name | string | 시리즈에 고유한 이름을 설정합니다. | no |
Visible
시리즈의 표시 여부를 설정합니다.
- 타입: boolean
- 기본값: true
Type
시리즈의 타입을 보여줍니다.
- 타입: string
- 기본값: string
Name
시리즈에 고유한 이름을 설정합니다.
- 타입: string
- 기본값: undefined
Data
| 이름 | 타입 | 설명 | 필수여부 |
|---|---|---|---|
| Data | string | 시리즈에 존재하는 데이터를 연결합니다. | no |
Data
시리즈에 리포트에 존재하는 데이터를 연결합니다.
- 타입: string
- 기본값: undefined
Series
| 이름 | 타입 | 설명 | 필수여부 |
|---|---|---|---|
| Value Field | string | Data 속성에서 연결한 데이터 중 값으로 사용할 필드를 선택합니다. | no |
| Data URL | string | 시리즈에 외부 경로로 데이터를 연결합니다. | no |
| Map Keys | string[] | 맵 area와 연결할 키값들을 지정합니다. | no |
| Legend | string | legend는 "이 시리즈가 어느 범례에 속하는지"를 알려주는 그룹 이름입니다. | no |
| Point Colors | PointColorsCallback | 데이터에 해당하는 컬러를 지정하기 위한 콜백함수를 지정합니다. | no |
| Style Callback | StyleCallback | 데이터에 스타일을 지정하기 위한 콜백함수를 지정합니다. | no |
Value Field
Data 속성에서 연결한 데이터 중 값으로 사용할 필드를 선택합니다.
- 타입: string
- 기본값: undefined
Data URL
시리에 외부 경로를 통해 전달받은 데이터를 연결합니다.
- 타입: string
- 기본값: undefined
Map Keys
맵 area와 연결할 키값들을 지정합니다. 두 값을 배열로 지정하면 첫번째 문자열은 맵소스 "properties"의 속성명, 두번째는 데이터포인트의 속성명입니다. 값을 하나만 지정하면 양쪽 같은 속성명으로 연결합니다.
- 타입: string[]
- 기본값: undefined
입력시 ,로 구분하여 여러 값을 입력할 수 있습니다.
'b-code', 'code'Legend
legend는 "이 시리즈가 어느 범례에 속하는지"를 알려주는 그룹 이름입니다.
Legend 속성 목록에 설정한 이름(Name)으로 설정해야합니다.
Legend By Category 속성을 비활성화 할 경우 Name 속성의 값이 범례에 포함됩니다. 반대로 속성을 활성화 하면 Category로 설정한 이름이 범례에 모두 포함됩니다.
- 타입: string
- 기본값: undefined
사용 가능한 시리즈
Point Colors
데이터에 해당하는 컬러를 지정합니다.
- 타입: PointColorsCallback
- 기본값: undefined
콜백함수로 전달 받은 DataPoint 값을 통해서 컬러를 반환하면 지도에 해당 컬러로 지정됩니다.
const ratio = point.source.genderRatio;
if (ratio < 1) return '#FFD5A3';
return '#FCE7C8';Style Callback
데이터에 스타일을 지정하기 위한 콜백함수를 지정합니다.
- 타입: StyleCallback
- 기본값: undefined
콜백함수로 전달 받은 DataPoint 값을 통해서 스타일을 반환하면 지도에 해당 스타일로 지정됩니다.
style, pointColors 등 다른 스타일 설정들 보다 우선합니다.
const { source } = args;
const { id, name } = source;
switch (name) {
case '서울특별시':
return {
fill: '#d3f9d8',
};
case '세종특별자치시':
return {
fill: '#f3d9fa',
};
}
return {
stroke: '#1c7ed6',
strokeWidth: '0.5',
fill: '#f1f3f5'
};Styles
| 이름 | 타입 | 설명 | 필수여부 |
|---|---|---|---|
| Fill | string | 배경 색상을 설정합니다. | no |
| Stroke | string | 테두리를 설정합니다. | no |
| Stroke Width | number | 테두리 두께를 설정합니다. | no |
Fill
데이터가 표시되는 도형의 내부를 채우는 색상을 지정합니다.
- 타입: string
- 기본값: undefined
Stroke
데이터 도형의 테두리 색상을 지정합니다.
- 타입: string
- 기본값: undefined
Stroke Width
데이터 도형의 테두리 두께을 지정합니다.
- 타입: number
- 기본값: undefined