차트의 범례에 대한 구성 옵션을 설정하는 속성입니다.
setOptions의legend를 이용하여 범례에 대한 구성 옵션을 설정합니다.
| name | type | required (default) | description |
|---|---|---|---|
| enabled | boolean |
선택(true) | 범례 표시 여부 |
| align | string |
선택(center) | 가로 정렬 방법 값: "left", "center", "right" |
| verticalAlign | string |
선택(bottom) | 세로 정렬 방법 값: "top", "middle", "bottom" (layout이 "proximate"이면 적용되지 않음) |
| backgroundColor | color |
선택(undefined) | 배경색 |
| borderColor | color |
선택(#999999) | border 색상 |
| borderWidth | number |
선택(1) | border의 너비 |
| borderRadius | number |
선택(5) | radius 적용 값 |
| layout | string |
선택(horizontal) | 배치 방법 값: "horizontal", "vertical", "proximate" ("proximate"는 각 시리즈 그래프 가까이에 항목 배치) |
| title | object |
선택 | 제목 속성 |
| title.text | string |
선택(undefined) | 제목 문자열 표시할 문구 (예: "지역"); HTML 문자열도 쓸 수 있음 |
| title.style | object |
선택 | 스타일 속성 |
| x | number |
선택(0) | 좌우 포지션 이동 값 |
| y | number |
선택(0) | 상하 포지션 이동 값 |
| floating | boolean |
선택(false) | 플로팅영역 여부 |
| reversed | boolean |
선택(false) | 시리즈 항목 역순 |
| itemStyle.color | string |
선택 | 시리즈 text 색상 CSS 색상 (예: "#333333", "red", "rgba(0,0,0,0.5)") |
| itemStyle.fontWeight | string |
선택(bold) | 시리즈 text 굵기 CSS 글자 굵기 (예: "normal", "bold") |
| itemStyle.fontSize | string |
선택(12px) | 시리즈 text 크기 CSS 크기 문자열 (예: "12px", "1.2em") |
| itemWidth | number |
선택(0) | 시리즈 아이템 별 너비 |
| itemDistance | number |
선택(20) | 시리즈 아이템 별 간격 |
| itemHoverStyle.color | color |
선택(#000000) | 시리즈 아이템 마우스 호버시 색상 |
| shadow | boolean |
선택(false) | 시리즈 아이템 그림자 표시 여부 |
| labelFormat | string |
선택({name}) | 범례 항목의 데이터 레이블 형식 설정 형식 문자열. 시리즈 속성(파이 차트는 포인트 속성)을 {name}처럼 중괄호로 씀 (예: "{name} 지역") |
| labelFormatter | function() |
선택(undefined) | 범례 항목의 데이터 레이블 형식 설정 |
| padding | number |
선택(8) | 범례 상자 안의 padding 설정 |
| rtl | boolean |
선택(false) | 범례 아이콘 표시 위치 설정 |
| symbolHeight | number |
선택 | 범례 아이콘 높이 설정 |
| symbolPadding | number |
선택(5) | 범례 아이콘과 텍스트 사이 padding 설정 |
| symbolRadius | number |
선택 | 범례 아이콘 radius 설정 |
| symbolWidth | number |
선택 | 범례 아이콘 너비 설정 |
| width | number or string |
선택 | 범례 상자 너비 설정 숫자는 픽셀, 문자열은 차트 너비 대비 백분율 (예: 300, "40%") |
| useHTML | boolean |
선택(false) | 범례 항목을 HTML로 표시합니다. |
| maxHeight | number |
선택(undefined) | 범례의 최대 높이(px)를 설정합니다. |
| navigation | object |
선택 | 범례 항목이 많아 여러 페이지로 나뉠 때 표시되는 페이지 이동 화살표를 설정합니다. |
| margin | number |
선택(10) | 범례와 그래프 영역(또는 x축 라벨) 사이의 간격(px)을 설정합니다. |
| itemMarginTop | number |
선택(2) | 범례 항목 위쪽 여백(px)을 설정합니다. 세로 배치(layout: "vertical") 범례에서 항목 간격을 넓힐 때 사용합니다. |
| itemMarginBottom | number |
선택(2) | 범례 항목 아래쪽 여백(px)을 설정합니다. 세로 배치(layout: "vertical") 범례에서 항목 간격을 넓힐 때 사용합니다. |
| itemHiddenStyle | object |
선택({color: "#666666", textDecoration: "line-through"}) | 숨긴 시리즈(범례를 클릭해 숨긴 항목)의 범례 글자 스타일을 설정합니다. |
| squareSymbol | boolean |
선택(true) | 범례 기호를 정사각형으로 표시할지 설정합니다. |
| alignColumns | boolean |
선택(true) | 가로 배치 범례가 여러 줄일 때 항목을 열 단위로 맞춰 정렬할지 설정합니다. |
| valueDecimals | number |
선택(undefined) | 색상 축의 구간(dataClasses)을 범례에 표시할 때 범위 숫자의 소수 자릿수를 설정합니다. |
| valueSuffix | string |
선택(undefined) | 색상 축의 구간(dataClasses)을 범례에 표시할 때 범위 숫자 뒤에 붙일 단위를 설정합니다. 범위 숫자 뒤에 붙일 문자열 (예: "%", "℃") |
| bubbleLegend | object |
선택(undefined) | 버블(bubble) 차트에서 버블 크기가 나타내는 값을 범례에 원 크기로 표시합니다. |