맨위로가기
 

SBCHART

닫기

global.paint

#2.0.91

이 기능은 차트의 앞 or 뒤 layer에 설명이나 부가정보를 위해 각종 도형 및 선, 문자를 동적으로 만들거나, 차트 생성시 미리 설정한 것을 기준으로 만들 수 있는 기능입니다.
즉, 차트 생성후 control panel을 이용하여 직접 그릴수도 있고, json형식의 data를 입력하여 차트가 생성될 때 자동으로 그릴수도 있습니다.
위 2가지 방식으로 그릴때, 각각에 대해서 차트의 앞 또는 뒤에 그릴지 여부를 설정할 수 있습니다.
control panel의 위치는 아래에 위치합니다. (조정불가)
control panel은 차트의 넓이에 따라 자동으로 1줄 또는 2줄로 표시됩니다.

global.paint.use

#2.0.91

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

  • Type : Boolean
  • Default : false

global.paint.showControl

#2.0.91

paint기능 사용시 control을 보일지 여부를 설정합니다.
control panel은 사용하지 않더라도, jsonData를 이용해서 그릴 경우에 이 속성을 사용할 수 있습니다.

  • Type : Boolean
  • Default : true

global.paint.margin.top

#2.0.91

control panel의 위쪽 margin을 설정합니다.

  • Type : Number
  • Default : 5

global.paint.margin.bottom

#2.0.91

control panel의 아래쪽 margin을 설정합니다.

  • Type : Number
  • Default : 0

global.paint.useBackground

#2.0.91

control panel을 사용하여 그릴시, 각 도형/선/문자들의 layer를 차트 앞으로 할 것인지, 뒤로 할 것인지를 설정합니다.
jsonData를 이용하여 그릴때와 각각 설정가능합니다.

  • Type : Boolean
  • Default : false

global.paint.cursorImageData

#2.0.91

paint기능 사용시 cursor의 모양을 사용자가 원하는 이미지로 바꿀수 있는 기능입니다.
값은 png파일을 base64형식으로 변환된 값을 사용하여야 합니다. 예시 "iVBORw0KGgoAAAANSUhE~~~~~~"

  • Type : String
  • Default : ""

global.paint.selectionBorderColor

#2.0.91

control panel에서 사용되는 각종 버튼의 선택여부를 나타내는 태두리의 색상을 설정합니다.

  • Type : String
  • Default : "#00FFAB"

global.paint.defaultText

#2.0.91

text버튼을 사용해서 문구를 쓸때, 미리 입력창에 default문구를 설정합니다.

  • Type : String
  • Default : ""

global.paint.defaultColor1~4

#2.0.91

default로 제공되는 4가지 색상을 각각 변경할 수 있도록 합니다.

  • Type : String

global.paint.paintJsondata.useBackground

#2.0.91

jsonData항목으로 입력받은 data를 갖고 도형/선/문구를 그릴때, 차트의 앞쪽에 그릴지 뒤쪽에 그릴지를 설정합니다.

  • Type : Boolean
  • Default : false

global.paint.paintJsondata.jsonData

#2.0.91

차트 생성시 그릴 도형/선/문구의 기본 내용을 json의 array형식으로 설정하여 그리도록 합니다.

  • Values (일반)
    • “type”(필수): 그릴 도형의 type을 정의한다. : line, path, rect, circle, text, custom 6가지 type을 지원
      *** custom type은 여러개의 직선,곡선,원,사각형,text를 하나의 객체처럼 만들어 처리할 수 있는 유용한 형식입니다. ***
      -. indicators, trizngle은 value 값과 pixel값 2가지를 사용하여 객체를 그리게 됩니다.
      -. indicators : 여러개의 분단(line + triangle)로 구성된 객체입니다. (width, height 속성 필요)
      -. triangle : 상각형모양의 객체이며, 방향꼭지점은 value 값으로 나머지는 pixcel값을 이용하여 그립니다. ( width, height, direction 속성 필요)
      -. rectPixel : 사각형모양의 객체이며, 중심좌표값은 value값으로 나머지는 pixel값을 이용하여 그립니다.
      ( halfWidth, halfHeight 속성 필요 : 사용하지 않는경우 default는 5pixel )
    • “position”(필수): 그릴 도형의 좌표를 배열형식으로 설정합니다. ( pixel단위가 아닌 x, y축의 value값을 기준으로 처리합니다 )
      각 type별로 여러개의 좌표가 필요할수 있습니다.(line은 2개좌표, path는 여러개, circle(중점)/text(시작점)는 하나의 좌표 등등)
    • “layer”(옵션): 그릴 도형의 Layer 위치를 설정합니다. ( 차트의 앞/뒤를 나타내는 "foreground", "background" 2가지 지원 )
      기본적으로는 paintJsonData.useBackground 속성에 따라 그려지지만, 각 object별로 따로 설정하고자 할때 사용합니다.
    • “radius”(필수):type이 circle인 경우에만 필수이며, 반지름을 나타냅니다. ( pixel단위이며, 현재 타원은 지원되지 않습니다. )
    • “text”(필수): type이 text인 경우에만 필수이며, 표시할 문구를 설정합니다.
    • “textAnchor”(필수): type이 text인 경우에만 필수이며, 표시할 문구를 설정합니다.
      -. subShape의 type은 custom을 제외한 line, path, circle, rect, text를 사용할 수 있습니다.
      -. subShape는 positionPx는 custom의 시작위치를 기준으로 pixel단위를 사용합니다.
      -. 즉, custom의 시작위치는 value를 기준으로 하고, subShape로 그리는 객체들은 시작위치를 0,0으로하여 pixel단위로 좌표를 받아 그립니다.
    • “color”(옵션): 선/도형의 외곽선/text의 색상을 설정합니다. (default : silver)
    • “fillColor”(옵션): type이 'path', 'circle', 'rect'일 경우에 적용되며, 도형의 내부 색상을 설정합니다. (default : silver)
      투명하게 그리고자 할 경우에는 'none'으로 설정합니다.
    • “linewidth”(옵션): 선과 도형 외곽선의 두께(width)를 설정합니다. (default : 1, pixel단위)
    • “linestyle”(옵션): 선과 도형 외곽선의 style을 설정합니다 (default : normal, 2가지 style(normal,dotted) 지원)
    • “strokeOpacity”(옵션): 선과 도형 외곽선의 투명도를 설정합니다. (default : 1, 0 ~ 1사이의 값)
    • “opacity”(옵션): Rectangle, Circle, Path같은 닫힌 도형의 내부 투명도를 설정합니다 (default : 1, 0 ~ 1사이의 값)
    • “curvedLine”(옵션): type이 'path'일 경우에만 적용되며, 선을 그릴때, 점과 점 사이의 선을 유연한 곡선으로 그릴수 있도록 설정합니다.
      ("false", "true" )
    • “useArrow”(옵션): type이 'line'일 경우에만 적용되며, 선에 화살표를 표시할지 여부를 설정, 단방향만 지원합니다. (default : false)
    • “fontsize”(옵션): type이 'text'일 경우에만 적용되며, text를 표시할 때, 글자의 크기를 설정합니다 (default : 12)
    • “fontweight”(옵션): type이 'text'일 경우에만 적용되며, text를 표시할 때, 글자의 두께를 설정합니다.
      (default : normal, 2가지(normal,bold) 지원)
    • “subShape”(필수): type이 custom일때만 필수이며, 여러개의 선/도형/텍스트를 하나의 custom object처럼 그릴수 있도록
      recursive 배열형식으로 설정합니다.
      -. subShape는 json array로 구성되며, 각 구성 항목들은 위의 jsonData의 형식을 따릅니다. ( type, positionPx, radius, .... )
      -. subShape의 type은 custom을 제외한 line, path, circle, rect, text를 사용할 수 있습니다.
      -. subShape는 positionPx는 custom의 시작위치를 기준으로 pixel단위를 사용합니다.
      -. 즉, custom의 시작위치는 value를 기준으로 하고, subShape로 그리는 객체들은 시작위치를 0,0으로하여 pixel단위로 좌표를 받아 그립니다.
      -. subShape의 좌표는 시작위치를 기준으로 x좌표는 오른쪽으로 +값을, y좌표는 아래쪽으로로 갈수록 + 값을 갖는것에 유의해야 합니다.
      -. 그외 나머지 옵션들은 jsonData의 기본설정 항목과 같습니다. (radius, text, color, fillColor, linewidth, ...)
    • “width”(옵션): type이 indicators, triangle시에 삼각형의 width를 pixel 단위로 설정합니다.
      ( 삼각형의 방향이 top/bottom 일 경우 전체 width의 절반을 나타냅니다.)
    • “height”(옵션): type이 indicators, triangle시에 삼각형의 height를 pixel 단위로 설정합니다.
      ( 삼각형의 방향이 left/right 일 경우 전체 height의 절반을 나타냅니다.)
    • “direction”(옵션): type이 triangle시에 삼각형의 방향을 설정합니다.(top, bottom, left, right 지원 : default는 bottom)
    • “usePixelY”(옵션): type이 indicators, text 일 경우에 이 속성을 사용하여 y의 위치를 pixel단위로 지정할 수 있습니다. ( 차트 상단 기준 )

global.paint.paintJsondata.useEvent

#2.0.91

jsonData항목으로 입력받은 data를 갖고 도형/선/문구를 그릴때, tooltip이나 click같은 event를 사용할지를 설정합니다.

  • Type : Boolean
  • Default : false

global.paint.cursorImageUrl

#2.0.112

paint 기능 사용시 cursor의 모양을 사용자가 원하는 이미지로 바꿀 수 있는 기능입니다.
값은 png파일이 위치한 경로를 입력합니다.

  • Type : String
  • Default : ""