SBChart - Options

Options

extend.donut

#2.0.0

도넛 차트에 대한 확장 옵션을 지정합니다.

Type : Object

Format

extend: {
  donut: {
      label: {
          show: true,
          format: function(value, ratio, id) {
              return (ratio * 100).toFixed(3) + "%";
          },
          outerRange: function(value, ratio, id) {
              return ratio*100 < 30;
          }
      },
      innerRadius: 20,
      cornerRadius: 10,
      padding: 0,
      fullCircle: true,
      title: { 
          type : "html",
          text : "<p>title 1행<br>subtitle 2행</p>"
      }
  }
}

extend.donut.innerRadius

#2.0.0

안쪽 반지름을 지정합니다.
지정하지 않았을 경우는 원의 크기에 따라 자동 계산됩니다.

Type : Number

extend.donut.cornerRadius

#2.0.86

각 영역(원호) 양 끝의 모서리를 둥글게 만듭니다.

Type : Number

extend.donut.padding

#2.0.0

각 영역(원호) 사이의 여백을 지정합니다.

Type : Number
Default : 0

extend.donut.label.show

#2.0.0

라벨 표시 여부를 지정합니다.

Type : Boolean
Default : true

extend.donut.label.position

#2.0.17

라벨 표시 위치를 지정합니다.

Type : String
Default : "inner"
Values
- inner : Default 그래프 내부
- outer : 그래프 외부

extend.donut.label.format

#2.0.0

라벨을 커스터마이징 합니다.

Type : Function

Format

extend: {
  donut: {
      label: {
          format: function(value, ratio, id) {
              return (ratio * 100).toFixed(3) + "%";
          }
      }
  }
}

Function 파라미터
- value : 값
- ratio : 계산된 비율 (0 ~ 1)
- id : 범례 ID

extend.donut.label.outerRange

#2.0.43

label.position="outer" 사용시 label 형태를 outer로 표시할 데이터 필터링 조건을 설정합니다.

Type : Number | Function

Format

Number Type
(Number Type 사용시 value 값이 설정 값 이하인 데이터들의 라벨이 outer 형태로 표시됩니다.)
```
extend: {
  donut: {
      label: {
          outerRange: 30
      }
  }
}
```

Function Type

extend: {
  donut: {
      label: {
          outerRange: function(value, ratio, id) {
              return ratio*100 < 30;
          }
      }
  }
}

Function 파라미터
- value : 값
- ratio : 계산된 비율 (0 ~ 1)
- id : 범례 ID

extend.donut.title

#2.0.4

title 옵션과는 구별되어 도넛의 가운데 영역에 표현됩니다.
html 구문을 삽입하고자 한다면 Object Type을 사용합니다.

Type : String | Object

extend.donut.title.type

#2.0.39

타이틀 형식을 지정합니다.

Type : String
Default: text
Values
- text : 기본
- html : html 구문 입력시

extend.donut.title.text

#2.0.39

title 영역에 출력할 text를 입력합니다.
html 타입일 경우, html 구문을 입력합니다.

Type : String

extend.donut.fullCircle

#2.0.4

full circle 여부를 지정합니다.
extend.donut.fullCircle = false일 경우 반원으로 표현됩니다.

Type : Boolean
Default : true

extend.donut.displayType

#2.0.49

원 차트의 value 또는 퍼센트 표시 여부를 지정합니다.

Type : String
Default : "percent"
Values
- percent : 퍼센트(%) 표시
- value : 값 표시

extend.donut.emptyKey

#2.0.49

max.value값 대비 총 합이 적을경우 남은 영역을 생성하기 위한 key값을 지정합니다.
key값이 중복되지 않아야합니다.

Type : String

extend.donut.emptyColor

#2.0.49

max.value값 대비 총 합이 적을경우 생성된 남은 영역의 색상을 설정합니다.
key값이 중복되지 않아야합니다.

Type : String
Default : #e2e2e2

extend.donut.emptyLabelDisplay

#2.0.49

max.value값 대비 총 합이 적을경우 생성된 남은 영역의 라벨의 표시 여부를 설정합니다.

Type : Boolean
Default : true

extend.donut.max.show

#2.0.49

최댓값 라벨을 show/hide 처리합니다.
fullCircle속성 false시 동작합니다.

Type : Boolean
Default : false

extend.donut.max.show.value

#2.0.49

extend.donut.max를 Object 타입으로 지정하는 경우 최댓값을 지정합니다.
max.value값이 데이터 총합보다 적을 경우 max.value은 데이터 총합으로 설정됩니다.

Type : Number

extend.donut.max.show.format

#2.0.49

최댓값 라벨을 커스터마이징 합니다.
fullCircle속성 false시 동작합니다.

Type : Function

Format

Function Type

extend: {
  donut: {
      displayType: false,
      max: {
          format: function(value) {
              return value+'%';
          }
      }
  }
}

Function 파라미터
- value : 값

extend.donut.min.show

#2.0.49

최솟값 라벨을 show/hide 처리합니다.
fullCircle속성 false시 동작합니다.

Type : Boolean
Default : false

extend.donut.min.show.value

#2.0.49

extend.donut.max를 Object 타입으로 지정하는 경우 최솟값을 지정합니다.

Type : Number

extend.donut.min.show.format

#2.0.49

최솟값 라벨을 커스터마이징 합니다.
fullCircle속성 false시 동작합니다.

Type : Function

Format

Function Type

extend: {
  donut: {
      min: {
          format: function(value) {
              return value+'%';
          }
      }
  }
}

Function 파라미터
- value : 값

extend.donut.useLabelFirst

#2.0.117

차트의 label이 이전data의 영역을 침범할 경우, 가려서 보여지지 않도록 설정합니다.

Type : Boolean
Default : false

extend.donut.multiDatas

#2.0.96

donut안에 여러 donut차트를 그릴경우에 사용됩니다.

Type : Arrary Object

extend: {
  donut: {
      multiDatas: [
	[
		{id:'2015-01', code:"code-1",  name:'2015-01', value:16},
		{id:'2015-02', code:"code-2",  name:'2015-02', value:10},
		{id:'2016-01', code:"code-3",  name:'2016-01', value: 8},
		{id:'2016-02', code:"code-4",  name:'2016-02', value: 6},
	],
	[
		{id:'2015-sub1', code:"code-1-1",  name:'2015-sub1', value:11},
		{id:'2015-sub2', code:"code-2-1",  name:'2015-sub2', value: 5},
		{id:'2015-sub3', code:"code-3-1",  name:'2015-sub3', value: 7},
		{id:'2015-sub4', code:"code-4-1",  name:'2015-sub4', value: 3},
		{id:'2016-sub1', code:"code-5-1",  name:'2016-sub1', value: 8},
		{id:'2016-sub2', code:"code-6-1",  name:'2016-sub2', value: 4},
		{id:'2016-sub3', code:"code-7-1",  name:'2016-sub3', value: 2},
	],
      ]
  }
}

extend.donut.multiPadding

#2.0.96

donut안에 여러 donut차트를 그릴경우에 차트간의 간격을 조정할 수 있습니다.

Type : Number

extend: {
  donut: {
      multiDatas: [
	[
		{id:'2015-01', code:"code-1",  name:'2015-01', value:16},
		{id:'2015-02', code:"code-2",  name:'2015-02', value:10},
		{id:'2016-01', code:"code-3",  name:'2016-01', value: 8},
		{id:'2016-02', code:"code-4",  name:'2016-02', value: 6},
	],
	[
		{id:'2015-sub1', code:"code-1-1",  name:'2015-sub1', value:11},
		{id:'2015-sub2', code:"code-2-1",  name:'2015-sub2', value: 5},
		{id:'2015-sub3', code:"code-3-1",  name:'2015-sub3', value: 7},
		{id:'2015-sub4', code:"code-4-1",  name:'2015-sub4', value: 3},
		{id:'2016-sub1', code:"code-5-1",  name:'2016-sub1', value: 8},
		{id:'2016-sub2', code:"code-6-1",  name:'2016-sub2', value: 4},
		{id:'2016-sub3', code:"code-7-1",  name:'2016-sub3', value: 2},
	],
      ],
	multiPadding: 10,
  }
}

extend.donut.multiInnerRadius

#2.0.96

차트의 중심에서 마지막 중심에 가까운 차트까지의 간격을 설정할 수 있습니다.

Type : Number

extend: {
  donut: {
      multiDatas: [
	[
		{id:'2015-01', code:"code-1",  name:'2015-01', value:16},
		{id:'2015-02', code:"code-2",  name:'2015-02', value:10},
		{id:'2016-01', code:"code-3",  name:'2016-01', value: 8},
		{id:'2016-02', code:"code-4",  name:'2016-02', value: 6},
	],
	[
		{id:'2015-sub1', code:"code-1-1",  name:'2015-sub1', value:11},
		{id:'2015-sub2', code:"code-2-1",  name:'2015-sub2', value: 5},
		{id:'2015-sub3', code:"code-3-1",  name:'2015-sub3', value: 7},
		{id:'2015-sub4', code:"code-4-1",  name:'2015-sub4', value: 3},
		{id:'2016-sub1', code:"code-5-1",  name:'2016-sub1', value: 8},
		{id:'2016-sub2', code:"code-6-1",  name:'2016-sub2', value: 4},
		{id:'2016-sub3', code:"code-7-1",  name:'2016-sub3', value: 2},
	],
      ],
	multiInnerRadius: 30,
  }
}

extend.donut.multiStrokeWidth

#2.0.96

차트의 외곽선의 굵기를 설정할 수 있습니다.

Type : Number

extend: {
  donut: {
      multiDatas: [
	[
		{id:'2015-01', code:"code-1",  name:'2015-01', value:16},
		{id:'2015-02', code:"code-2",  name:'2015-02', value:10},
		{id:'2016-01', code:"code-3",  name:'2016-01', value: 8},
		{id:'2016-02', code:"code-4",  name:'2016-02', value: 6},
	],
	[
		{id:'2015-sub1', code:"code-1-1",  name:'2015-sub1', value:11},
		{id:'2015-sub2', code:"code-2-1",  name:'2015-sub2', value: 5},
		{id:'2015-sub3', code:"code-3-1",  name:'2015-sub3', value: 7},
		{id:'2015-sub4', code:"code-4-1",  name:'2015-sub4', value: 3},
		{id:'2016-sub1', code:"code-5-1",  name:'2016-sub1', value: 8},
		{id:'2016-sub2', code:"code-6-1",  name:'2016-sub2', value: 4},
		{id:'2016-sub3', code:"code-7-1",  name:'2016-sub3', value: 2},
	],
      ],
	multiStrokeWidth: 5,
	multiStrokeColor: 'black',
  }
}

extend.donut.multiStrokeColor

#2.0.96

차트의 외곽선의 색상을 설정할 수 있습니다.

Type : String

extend: {
  donut: {
      multiDatas: [
	[
		{id:'2015-01', code:"code-1",  name:'2015-01', value:16},
		{id:'2015-02', code:"code-2",  name:'2015-02', value:10},
		{id:'2016-01', code:"code-3",  name:'2016-01', value: 8},
		{id:'2016-02', code:"code-4",  name:'2016-02', value: 6},
	],
	[
		{id:'2015-sub1', code:"code-1-1",  name:'2015-sub1', value:11},
		{id:'2015-sub2', code:"code-2-1",  name:'2015-sub2', value: 5},
		{id:'2015-sub3', code:"code-3-1",  name:'2015-sub3', value: 7},
		{id:'2015-sub4', code:"code-4-1",  name:'2015-sub4', value: 3},
		{id:'2016-sub1', code:"code-5-1",  name:'2016-sub1', value: 8},
		{id:'2016-sub2', code:"code-6-1",  name:'2016-sub2', value: 4},
		{id:'2016-sub3', code:"code-7-1",  name:'2016-sub3', value: 2},
	],
      ],
	multiStrokeWidth: 5,
	multiStrokeColor: 'pink',
  }
}