맨위로가기
 

SBCHART

닫기

extend.tree

#2.0.145

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

  • Type : Object
  • Format
    extend: {
      tree: {
        treeType: "horizontal",
        sort: "asc",
        dragable: true,
        zoomable: true,
        zoomRange: {
          min: 10,
          max: 10,
        },
        margin: {
          top: 10,
          bottom: 10,
          right: 10,
          left: 10,
        },
        useImage: true,
        collapse: true,
        linkStytle: {
          linkType: "normal",
          width: 3,
          color: "silver",   
        },
        textStyle: {
          showText: true,
          textFontSize: 5,
          textFontWeight: 5,
          textFontStyle: "italic",
          textColor: "silver",   
          useStroke: true,
          strokeColor: "black",
          strokeWidth: 3,
          textMovePos: {
          	parentPosition: {x: 0,y: 0,},
          	leafPosition: {x: 0,y: 0,},
        	},
        },
        nodeStyle: {
          showNode: true,
          radius: 5,
          color: "silver",   
          strokeWidth: 3,
          strokeColor: "black",
          collapsedColor: "black",
          collapsedStrokeColor: "black",
        },
      }
    }
    

extend.tree.treeType

#2.0.145

tree 차트의 방향을 설정합니다.

  • Type : String
  • Defalut: "vertical"

extend.tree.dragable

#2.0.145

드래그 기능의 사용여부를 설정합니다.

드래그 기능을 사용하면 각 노드들을 드래그하여 움직일 수 있습니다.

  • Type : Boolean
  • Defalut: false

extend.tree.zoomable

#2.0.145

줌 기능의 사용여부를 설정합니다.

마우스 휠 이벤트를 통해 차트가 확대 및 축소 됩니다.

  • Type : Boolean
  • Defalut: false

extend.tree.zoomRange

#2.0.145

줌 기능이 적용되는 최소, 최대 배율을 설정합니다.

  • Type : Object
  • Default : { min: 1, max: 3 }

extend.tree.sort

#2.0.145

노드의 정렬 방식을 설정합니다.

  • Type : String
  • Default : "none"

extend.tree.margin

#2.0.145

차트영역의 여백을 설정합니다.

기준점은 각 노드의 정중앙 좌표입니다.

  • Type : Object
  • Default : { top: 0, bottom: 0, left: 0, right: 0 }

extend.tree.useImage

#2.0.145

이미지 사용 여부를 설정합니다.

  • Type : Boolean
  • Default : false

extend.tree.collapse

#2.0.145

노드 클릭 시 하위 노드 숨김 기능 사용 여부를 설정합니다.

  • Type : Boolean
  • Default : false

extend.tree.linkStyle.linkType

#2.0.145

링크 타입을 설정합니다.

  • Type : String
  • Default : "straight"

extend.tree.linkStyle.width

#2.0.145

링크의 너비를 설정합니다.

  • Type : Number
  • Default : 1

extend.tree.linkStyle.color

#2.0.145

링크의 색상을 설정합니다.

  • Type : String
  • Default : "lightgrey"

extend.tree.textStyle.showText

#2.0.145

노드의 텍스트를 표시합니다.

  • Type : Boolean
  • Default : true

extend.tree.textStyle.textFontSize

#2.0.145

노드의 텍스트 크기를 설정합니다.

  • Type : Number
  • Default : 14

extend.tree.textStyle.textFontWeight

#2.0.145

텍스트의 글꼴 두께를 설정합니다.

  • Type : String
  • Default : "normal"

extend.tree.textStyle.textFontStyle

#2.0.145

텍스트의 글꼴 스타일을 설정합니다.

  • Type : String
  • Default : "normal"

extend.tree.textStyle.textMovePos.parentPosition

#2.0.145

자식이 있는 노드의 텍스트의 위치를 설정합니다.

  • Type : Object
  • Default : { x: 0, y: 0 }

extend.tree.textStyle.textMovePos.leafPosition

#2.0.145

자식이 없는 노드의 텍스트의 위치를 설정합니다.

  • Type : Object
  • Default : { x: 0, y: 0 }

extend.tree.textStyle.textColor

#2.0.145

노드의 텍스트 색상을 설정합니다.

  • Type : String
  • Default : "black"

extend.tree.textStyle.useStroke

#2.0.145

텍스트 윤곽선 사용 여부를 설정합니다.

  • Type : Boolean
  • Default : true

extend.tree.textStyle.strokeWidth

#2.0.145

텍스트 윤곽선의 너비를 설정합니다.

  • Type : Number
  • Default : "3"

extend.tree.textStyle.strokeColor

#2.0.145

텍스트 윤곽선 색상을 설정합니다.

  • Type : String
  • Default : "white"

extend.tree.nodeStyle.showNode

#2.0.145

노드의 사용 여부를 설정합니다.

  • Type : Boolean
  • Default : true

extend.tree.nodeStyle.radius

#2.0.145

노드의 반지름을 설정합니다.

  • Type : Number
  • Default : 5

extend.tree.nodeStyle.color

#2.0.145

노드의 색상을 설정합니다.

  • Type : String
  • Default : "white"

extend.tree.nodeStyle.strokeWidth

#2.0.145

노드의 외곽선 너비를 설정합니다.

  • Type : Number
  • Default : 1

extend.tree.nodeStyle.strokeColor

#2.0.145

노드의 외곽선 색상을 설정합니다.

  • Type : String
  • Default : "grey"

extend.tree.nodeStyle.collapsedColor

#2.0.145

접힌 노드의 색상을 설정합니다.

  • Type : String
  • Default : "grey"

extend.tree.nodeStyle.collapsedStrokeColor

#2.0.145

접힌 노드의 테두리 색상을 설정합니다.

  • Type : String
  • Default : "grey"

extend.tree.nodeStyle.collapsedStrokeColor

#2.0.145

접힌 노드의 테두리 색상을 설정합니다.

  • Type : String
  • Default : "grey"