dataLabels (plotOptions properties)
데이터 라벨의 속성을 설정 합니다.
Info
| name | type | required | description |
|---|---|---|---|
| dataLabels | object |
선택 | 데이터 라벨 속성 |
| dataLabels.align | string |
선택(center) | 정렬 방법 |
| dataLabels.allowOverlap | boolean |
선택(false) | 데이터 중복 허용 여부 |
| dataLabels.backgroundColor | color |
선택(undefined) | 데이터 레이블 배경 색상 |
| dataLabels.borderColor | color |
선택(undefined) | 데이터 레이블 테두리 색상 |
| dataLabels.borderRadius | number |
선택(0) | 데이터 레이블 테두리 radius 값 |
| dataLabels.borderWidth | number |
선택(0) | 데이터 레이블 테두리 너비 |
| dataLabels.distance | number |
선택(30) | 끝지점 부터의 표시 위치pie, dependency-wheel 차트에서만 사용 가능 |
| dataLabels.enabled | boolean |
선택(false) | 표시 여부 |
| dataLabels.filter | object |
선택 | 데이터 레이블이 표시될 값 필터 Ex) filter: {property: 'percentage', operator: '>', value: 4} |
| dataLabels.format | string |
선택({y}) | 출력 포맷 Ex) format: ‘{y} mm’ |
| dataLabels.formatter | function() |
선택 | 출력 포맷을 정의하는 callback Ex) this.y 현재 y값 |
| dataLabels.inside | boolean |
선택 | 상자 내부의 레이블 정렬 여부 true일 경우 내부의 정렬 |
| dataLabels.linkFormat | string |
선택 | 노드를 잇는 링크(선) 위에 나타나는 데이터 레이블 문자열graph 차트에서만 사용 가능 |
| dataLabels.rotation | number |
선택(0) | 기울기 |
| dataLabels.shadow | boolean |
선택(false) | 그림자 여부 |
| dataLabels.style | object |
선택 | 스타일 속성 |
| dataLabels.useHTML | boolean |
선택 | HTML 사용 여부 |
| dataLabels.verticalAlign | string |
선택(bottom) | 수직 정렬 여부 |
| dataLabels.x | number |
선택 | 좌우 포지션 이동 값 |
| dataLabels.y | number |
선택 | 상하 포지션 이동 값 |
- dataLabels.style Info
| name | type | required | description |
|---|---|---|---|
| color | color |
선택 | 폰트 색상 |
| fontSize | string |
선택 | 폰트 크기(px) |
| fontWeight | string |
선택(bold) | 폰트 bold 여부 |
- dataLabels.filter Info
| name | type | required | description |
|---|---|---|---|
| operator | operator |
선택 | 비교할 연산자 ( ">" , "<" , ">=" , "<=" , " == " , "===" , "!=" , "!==") |
| property | string |
선택 | 필터링 기준 데이터 포인트 속성 (x, y, name, percentage, sum 등) |
| value | number |
선택(bold) | 필터링 기준 값 |
Enum
- align
| value | description |
|---|---|
| center | 중앙 정렬 |
| left | 좌측 정렬 |
| right | 우측 정렬 |
- verticalAlign
| value | description |
|---|---|
| top | 위쪽 정렬 |
| middle | 중간 정렬 |
| bottom | 아래쪽 정렬 |
Example
myChart.setOptions({
plotOptions: {
column: {
dataLabels : { // dataLabels 속성 설정
enabled:true,
align:"left",
backgroundColor:"#ffdab9",
style:{
color:"#800000"
},
formatter:function(){
return this.y + "개";
}
}
}
},
series: [{
type: "column",
name : "서울",
data : [60,40,20,80]
},{
name : "인천",
data : [30,50,90,70]
},{
name : "부산",
data : [40,70,30,60]
}]
}, {
append: true,
redraw: true
});
제공 버전
| version | desc |
|---|---|
| 7.3.0.0 |