맨위로가기
 

SBCHART

닫기

Pointer Options

#latest  #options

Pointer 차트 고유 옵션입니다.

Options

  • extend.pointer.type

    pointer 차트에서 data를 표시할때의 모양의 형태를 설정합니다.

  • extend.pointer.triangle.direction

    data좌표를 기준으로 삼각형의 방향을 설정합니다. (top, bottom, left, right)

  • extend.pointer.triangle.width

    data좌표를 기준으로 삼각형의 가로길이를 설정합니다.
    top, bottom일때는 가로의 1/2이며, left, right일때와 차이가 있습니다.

  • extend.pointer.triangle.height

    data좌표를 기준으로 삼각형의 세로길이를 설정합니다.
    top, bottom일때는 가로의 1/2이며, left, right일때와 차이가 있습니다.

  • extend.pointer.triangle.pinPoint.usePin

    pointer차트에서 pin형태의 line을 설정합니다.

  • extend.pointer.triangle.pinPoint.minY

    pin의 line의 길이를 지정합니다.
    y축의 pixel이 아닌 데이터의 값을 기준으로 지정합니다.

  • extend.pointer.triangle.pinPoint.pinLineStyle.stokeStyle

    pin line의 style을 지정합니다.(normal, dotted, dashed)

  • extend.pointer.triangle.pinPoint.pinLineStyle.stokeWidth

    pin line의 두께(넓이)을 지정합니다.

  • extend.pointer.triangle.pinPoint.pinLineStyle.stokeColor

    pin line의 색상을 지정합니다.

  • extend.pointer.triangle.pinPoint.pinLineStyle.stokeOpacity

    pin line의 투명도를 지정합니다.

  • extend.pointer.shapeStyle.strokeStyle

    pointer의 모양에 대한 설정중 외곽선의 형태를 설정합니다.
    normal, dotted, dashed 3가지 type을 지원합니다.

  • extend.pointer.shapeStyle.strokeColor

    pointer의 모양에 대한 설정중 외곽선의 색상을 설정합니다.

  • extend.pointer.shapeStyle.strokeWidth

    pointer의 모양에 대한 설정중 외곽선의 색상을 설정합니다.

  • extend.pointer.shapeStyle.strokeWidth

    pointer의 모양에 대한 설정중 외곽선의 색상을 설정합니다.

  • extend.pointer.shapeStyle.fillColor

    pointer의 모양에 대한 설정중 외곽선의 색상을 설정합니다.

  • extend.pointer.shapeStyle.fillOpacity

    pointer의 모양에 대한 설정중 외곽선의 색상을 설정합니다.

Example

Code

var chart = sb.chart.render("#chartWrap", {
    data: {
        type: { "2017" : "area", 'data2' : "pointer"},
    	xs: {
    	  2017 : "2017_x",
    	  data2 : "data2_x",	
    	},    
        columns: [
            ["2017_x", 0, 1, 2, 3, 4, 5],
            ["2017", 300, 240, 290, 230, 300, 320],
            ["data2_x", 1, 2, 4],
            ["data2", 260, 310, 320],
        ]
    }
    extend: {
      pointer: {
        type:"triangle",
        triangle: {
          radius :5,
        }   
      }
    }
});