맨위로가기
 

SBCHART

닫기

extend.pie

#2.0.0

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

  • Type : Object
  • Format 
    extend: {
  pie: {
      label: {
          show: true,
          format: function(value, ratio, id) {
              return (ratio * 100).toFixed(3) + "%";
          },
          outerRange: function(value, ratio, id) {
              return ratio*100 < 30;
          }
      },
      padding: 0,
      fullCircle: true,
      displayType: "value"
  }
}

extend.pie.label.show

#2.0.0

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

  • Type : Boolean
  • Default : true

extend.pie.label.position

#2.0.17

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

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

extend.pie.label.format

#2.0.0

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

  • Type : Function
  • Format 
    extend: {
  pie: {
      label: {
          format: function(value, ratio, id) {
              return (ratio * 100).toFixed(3) + "%";
          }
      }
  }
}
  • Function 파라미터
    • value : 값
    • ratio : 계산된 비율 (0 ~ 1)
    • id : 범례 ID

extend.pie.label.outerRange

#2.0.43

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

  • Type : Number | Function
  • Format
    • Number Type
      (Number Type 사용시 value 값이 설정 값 이하인 데이터들의 라벨이 outer 형태로 표시됩니다.) 
      extend: {
  pie: {
      label: {
          outerRange: 30
      }
  }
}
    • Function Type 
      extend: {
  pie: {
      label: {
          outerRange: function(value, ratio, id) {
              return ratio*100 < 30;
          }
      }
  }
}
  • Function 파라미터
    • value : 값
    • ratio : 계산된 비율 (0 ~ 1)
    • id : 범례 ID

extend.pie.padding

#2.0.0

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

  • Type : Number
  • Default : 0

extend.pie.fullCircle

#2.0.4

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

  • Type : Boolean
  • Default : true

extend.pie.displayType

#2.0.49

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

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

extend.pie.moveFirstLabelPosY

#2.0.137

format으로 2개열로 표시되는 label의 첫번째 라벨 위치를 Y축 방향으로 설정된 값만큼 이동합니다.
config.data.labelMultiLineGap을 이용해서 첫번째 라벨과 두번째 라벨사이의 간격을 조정할 수 있습니다.

  • Type : Number
  • Default : 0

extend.pie.secondLabelFontSize

#2.0.137

개행처리되는 label의 두번째 라벨의 폰트크기를 설정합니다.

  • Type : Number
  • Default : 0

extend.pie.secondLabelFontWeight

#2.0.137

두번째 라벨의 폰트 스타일을 설정합니다.
config.data.labelMultiLineGap을 이용해서 첫번째 라벨과 두번째 라벨사이의 간격을 조정할 수 있습니다.

  • Type : Number
  • Default : 0

extend.pie.secondLabelColor

#2.0.137

개행처리되는 두번째 라벨의 색상을 설정합니다.
값은 auto와 color name, color value를 사용할 수 있습니다.
auto를 설정하면 legend 색상과 같은 색상으로 설정됩니다.
pink와 같은 색상명이나, #00FFAB와 같은 색상값을 사용할 수 있습니다. 현재는 bold만 지원합니다.

  • Type : String
  • Default : none