맨위로가기
 

SBCHART

닫기

data.datarange

#2.0.80

차트의 X축 또는 Y축을 기준으로 특정 영역을 선택하고 callback을 이용하여 선택된 영역을 확인할 수 있는 기능입니다.
datarange는 배경영역,선택영역시작을 표시하는 영역, 선택영역 끝을 표시하는 영역, 선택된 영역을 표시하는 영역으로 구분됩니다.

  • Type : Object
  • Format 
    data: {
  datarange: {
      show: true,
  }
}

data.datarange.show

#2.0.80

datarange의 표시여부를 설정합니다. 기본값은 false입니다.

  • Type : Boolean
  • Default : false

data.datarange.isHorizon

#2.0.80

datarange영역을 X축 또는 Y축중 어느것을 기준으로 할 것인지를 설정합니다..

true이면 X축을 기준으로, false이면 Y축을 기준으로 설정합니다.

  • Type : Boolean
  • Default : true

data.datarange.size

#2.0.80

datarange의 width와 height를 각각 설정합니다.

설정하지 않는 경우 default로 차트 영역의 width와 height값이 설정됩니다.

  • Type : Object
  • 예제 : size: { width: 100, height: 25 }

data.datarange.position

#2.0.80

datarange의 시작 위치를 차트영역을 기준으로 설정합니다.

top인 경우 차트의 윗부분, bottom인 경우 차트의 아랫부분, left인 경우 차트의 왼쪽부분, right인 경우 차트의 오른쪽에 위치합니다.

isHorizon=true인 경우 top/bottom을 설정할 수 있습니다. (default: top)

isHorizon=false인 경우 left/right을 설정할 수 있습니다. (default: left)

  • Type : String
  • Default : 'top'

data.datarange.movePos

#2.0.80

datarange의 시작 위치를 pixel 기준으로 움직이도록 설정합니다.

x값의 경우 -는 왼쪽으로 +는 오른쪽으로 이동시킵니다.

y값의 경우 -는 위쪽으로 +는 아래쪽으로 이동시킵니다.

  • Type : Object
  • 예제 : movePos: { x: 100, y: 25 }

data.datarange.dragable

#2.0.80

datarange의 drag & drop기능을 설정합니다.

dnd기능은 datarange의 백그라운드 영역을 drag로 시작할 수 있습니다. min/max/selected영역은 drag를 할 수 없습니다.

  • Type : Boolean
  • Default : false

data.datarange.initValue

#2.0.80

datarange의 min/max값의 시작위치를 지정하는 값을 기준으로 설정합니다.

지정하지 않는 경우 시작값/끝값을 사용합니다.

X축의 경우, plot차트처럼 값이 따로 존재하면 값을 이용하고, 존재하지 않는 경우 index를 기준으로 처리합니다.

  • Type : Object
  • 예제 : initValue: { min: 10, max: 15 }

data.datarange.drSeperatorGap

#2.0.80

datarange의 min/max를 설정하는 영역의 넓이(width)를 설정합니다.

isHorizon=false이면 높이(height)를 설정합니다.

  • Type : Number
  • Default : 10

data.datarange.drBack

#2.0.80

datarange의 background 영역에 대한 색상/두께/투명도 등을 설정합니다.

drBack.strokeStyle : 외곽선의 Style을 설정합니다. (현재는 dotted만 지원)

drBack.strokeColor : 외곽선의 색상을 설정합니다.

drBack.strokeWidth : 외곽선의 두꼐을 설정합니다.

drBack.strokeOpacity : 외곽선의 투명도을 설정합니다.

drBack.color : 영역 내부의 색상을 설정합니다.

drBack.opacity : 영역 내부의 투명도를 설정합니다.

  • Type : Object
  • 예제 : drBack: { strokeColor: 'silver', strokeWidth: 2, strokeOpacity: 0.5, color: 'gray', opacity: 1 }

data.datarange.drMin

#2.0.80

datarange의 minimum값을 설정하는 영역에 대한 색상/두께/투명도 등을 설정합니다.

drMin.strokeStyle : 외곽선의 Style을 설정합니다. (현재는 dotted만 지원)

drMin.strokeColor : 외곽선의 색상을 설정합니다.

drMin.strokeWidth : 외곽선의 두꼐을 설정합니다.

drMin.strokeOpacity : 외곽선의 투명도을 설정합니다.

drMin.color : 영역 내부의 색상을 설정합니다.

drMin.opacity : 영역 내부의 투명도를 설정합니다.

  • Type : Object
  • 예제 : drMin: { strokeColor: 'silver', strokeWidth: 2, strokeOpacity: 0.5, color: 'gray', opacity: 1 }

data.datarange.drMax

#2.0.80

datarange의 maximum값을 설정하는 영역에 대한 색상/두께/투명도 등을 설정합니다.

drMax.strokeStyle : 외곽선의 Style을 설정합니다. (현재는 dotted만 지원)

drMax.strokeColor : 외곽선의 색상을 설정합니다.

drMax.strokeWidth : 외곽선의 두꼐을 설정합니다.

drMax.strokeOpacity : 외곽선의 투명도을 설정합니다.

drMax.color : 영역 내부의 색상을 설정합니다.

drMax.opacity : 영역 내부의 투명도를 설정합니다.

  • Type : Object
  • 예제 : drMax: { strokeColor: 'silver', strokeWidth: 2, strokeOpacity: 0.5, color: 'gray', opacity: 1 }

data.datarange.drSelected

#2.0.80

datarange의 min ~ max값을 표시하는 영역에 대한 색상/두께/투명도 등을 설정합니다.

drSelected.strokeStyle : 외곽선의 Style을 설정합니다. (현재는 dotted만 지원)

drSelected.strokeColor : 외곽선의 색상을 설정합니다.

drSelected.strokeWidth : 외곽선의 두꼐을 설정합니다.

drSelected.strokeOpacity : 외곽선의 투명도을 설정합니다.

drSelected.color : 영역 내부의 색상을 설정합니다.

drSelected.opacity : 영역 내부의 투명도를 설정합니다.

  • Type : Object
  • 예제 : drSelected: { strokeColor: 'silver', strokeWidth: 2, strokeOpacity: 0.5, color: 'gray', opacity: 1 }

data.datarange.onChange

#2.0.80

datarange의 min ~ max값을 선택시 이벤트를 발생시키는 기능입니다.

선택영역의 min/max값을 배열로 받을 수 있습니다. 배열의 첫번째값이 min, 두번째 값이 max

isHorizon=false일 경우 . 배열의 첫번째 값이 max값이고, 두번째 값이 min값으로 전달됩니다.

  • Type : function
  • 예제 : onChange: function(data) { alert("selected area : " + data[0] + " ~ " + data[1]); }

data.datarange.showLabel

#2.0.80

datarange의 시작/끝 값을 표시할지 여부를 설정합니다.

  • Type : Boolean
  • default : false

    • data.datarange.labelPosition

    #2.0.80

    datarange의 영역을 표시하는 Label의 위치를 설정합니다.

    isHorizon=true이면 default : bottom이고, top/bottom만 설정가능합니다

    isHorizon=false이면 default : left이고, left/right만 설정가능합니다.

    • Type : String
    • default : "bottom"