맨위로가기
 

SBCHART

닫기

extend.gaugeNew

#2.0.65

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

  • Type : Object
  • Format
    
    extend: {
        gaugeNew: {
            userRadius: 190,
            innerRadius: 170,
            startAngle: -130,
            endAngle: 130,
            min: 0,
            max: 100,
            fullCircle: true,
        
            mainCircle: {
                circleType: "single",
                strokeWidth: 0,
                strokeColor: "pink",
                fillColor: "#EEEEEE",
                useGradation: false,
                gradationColor: {
                    useMiddleColor: true,
                    startColor: "#84FB7F",
                    middleColor: "#C0BD7F",
                    endColor: "#F8867F",
                    direction: "tb",
                },  
            },
    
            subCircle: {
                show: false,
                radius: 190,
                innerRadius: 170,
                startAngle: -130,
                endAngle: 130,
                min: 0,
                max: 100,
                strokeWidth: 0,
                strokeColor: "pink",
                fillColor: "#EEEEEE",
                opacity: 1,
            },
    
            ticks: {
                majorTicks: {
                    show: true,
                    style: "line",
                    length: 12,
                    startPosition: 25,
                    interval: 10,
                    strokeWidth: 1,
                    strokeColor: "black",
                    fillColor: "red",
                    showLabel: true,
                    labelPosition: 50,
                    labelDirection: false,
                    circleRadius: 5,
                },  
                minorTicks: {
                    show: true,
                    style: "line",
                    length: 6,
                    startPosition: 25,
                    interval: 2,
                    strokeWidth: 1,
                    strokeColor: "silver",
                    fillColor: "white",
                    circleRadius: 2,
                },  
            },
    
            pointer: {
                startPosition: 65,
                length: 145,
                pointerStyle: {
                    show: true,
                    style: "pentagon",
                    strokeWidth: 1,
                    strokeColor: "#5A5F62",
                    fillColor: "#5A5F62",
                    opacity: 1,
                    lineCap: "#round",
                    midPosition: 130,
                    midWidth: 12,
                    endWidth: 1,
                },  
                pointerCircle: {
                    show: true,
                    radius: 3,
                    strokeWidth: 1,
                    strokeColor: "black",
                    fillColor: "white",
                    opacity: 1,
                    useGradation: false,
                    gradationColor: {
                        useMiddleColor: true,
                        startColor: "#84FB7F",
                        middleColor: "#C0BD7F",
                        endColor: "#F8867F",
                        direction: "tb",
                    },  
                },  
            },
    
            drawValue: {
                label: {
                    show: true,
                    format: function(v) {
                        return v+ " km/h";
                    },  
                    posX: 0,
                    posY: 50,
                },  
                circle: {
                    show: true,
                    strokeWidth: 1,
                    strokeColor: "white",
                    fillColor: "pink",
                    opacity: 1,
                    useGradation: true,
                    gradationColor: {
                        useMiddleColor: true,
                        startColor: "pink",
                        middleColor: "yellow",
                        endColor: "skyblue",
                        direction: "fc",
                    },  
                },  
            },
        },
    },   
    
    
    

extend.gaugeNew.userRadius

#2.0.65

mainCircle 원의 반지름을 사용자가 원하는 크기로 설정합니다.

기본적으로는 size에 꽉 차도록 자동 설정됩니다.

  • Type : Number

extend.gaugeNew.innerRadius

#2.0.65

mainCircle 원의 안쪽 반지름을 사용자가 원하는 크기로 지정합니다.

기본적으로는 외부원의 반지름에 일정비율로 자동 설정됩니다.

  • Type : Number

extend.gaugeNew.startAngle

#2.0.65

mainCircle 원의 시작 각도를 지정합니다.

기준은 y축 기준(0도)으로, 왼쪽으로 갈수록 -값이고 오른쪽으로 갈수록 양수 값입니다.

단위는 arc degree(도)이며 -180 ~ 180 사이 입니다.

  • Type : Number
  • Default : -90

extend.gaugeNew.endAngle

#2.0.65

mainCircle 원의 끝부분의 각도를 지정합니다.

기준은 y축 기준(0도)으로, 왼쪽으로 갈수록 -값이고 오른쪽으로 갈수록 양수 값입니다.

단위는 arc degree(도)이며 -180 ~ 180 사이 입니다.

  • Type : Number
  • Default : 90

extend.gaugeNew.min

#2.0.65

mainCircle 원의 시작각도에 해당하는 데이터 범위값중 최소값을 지정합니다.

  • Type : Number
  • Default : 0

extend.gaugeNew.max

#2.0.65

mainCircle 원의 끝부분의 각도에 해당하는 데이터 범위값중 최대값을 지정합니다.

  • Type : Number
  • Default : 100

extend.gaugeNew.fullCircle

#2.0.65

GaugeNew차트에서 사용할 원의 형태를 지정합니다. ( 원 / 반원 )

false(반원)일 경우 startAngle은 최소 -90보다는 커야 하고, endAngle은 90보다 작아야 합니다.

만약 범위가 잘못되면 자동으로 -90 ~ 90으로 설정됩니다.

  • Type : Boolean
  • Default : true

extend.gaugeNew.mainCircle.circleType

#2.0.65

사용되어지는 원의 구간 형태를 지정합니다. ( single, multi 2가지 형태 지원 )

single 일 경우, 하나의 구간으로 표시합니다.

multi 일 경우, 여러 구간으로 표시할 수 있습니다. 아래의 예제는 2개의 구간으로 나누고 각각 칼러와 text를 넣을 수 있습니다

multi 사용방법에 대해, 자세한 내용들은 기술지원실로 문의 바랍니다.

multi 예제 : extend.gaugeNew.mainCircle.multi = [ {multiArcValue: 40, color: 'green', label: "안전"},{multiArcValue: 100, color: '#4774CF', label: "주의"}].

  • Type : String
  • Default : "single"

extend.gaugeNew.mainCircle.strokeWidth

#2.0.65

mainCircle 원의 외곽선의 두께를 설정합니다.

  • Type : Number

extend.gaugeNew.mainCircle.strokeColor

#2.0.65

mainCircle 원의 외곽선의 색상을 설정합니다.

  • Type : String

extend.gaugeNew.mainCircle.fillColor

#2.0.65

mainCircle 원의 내부 색상을 설정합니다.

  • Type : String

extend.gaugeNew.mainCircle.useGradation

#2.0.65

mainCircle 원의 내부 색상을 gradation으로 처리할 지 여부를 설정합니다.

  • Type : Boolean
  • Default : false

extend.gaugeNew.mainCircle.gradationColor.useMiddleColor

#2.0.65

gradation색상으로 중간색상을 사용할 지 여부를 설정합니다.

  • Type : Boolean
  • Default : false

extend.gaugeNew.mainCircle.gradationColor.startColor

#2.0.65

gradation 시작 색상을 설정합니다.

  • Type : String

extend.gaugeNew.mainCircle.gradationColor.middleColor

#2.0.65

gradation 중간 색상을 설정합니다.

  • Type : String

extend.gaugeNew.mainCircle.gradationColor.endColor

#2.0.65

gradation 끝 색상을 설정합니다.

  • Type : String

extend.gaugeNew.mainCircle.gradationColor.direction

#2.0.65

gradation의 방향을 설정합니다. : tb(default), bt, lr, rl, fc, tc

tb : top --> down

bt : down --> topn

lr : left --> right

rl : right --> left

fc : from center ( circle gradation )

tc : to center ( circle gradation )

  • Type : String
  • Default : "tb"

extend.gaugeNew.subCircle.show

#2.0.65

Main Circle외에 sub circle을 보여줄지 여부를 설정합니다.

Sub circle도 main처럼 radius와 innerRadius, min, max, 등의 값을 갖을 수 있습니다.

Radius/InnerRadius의 Default값은 main circle의 값과 동일하게 적용됩니다.

startAngle/endAngle의 Default값은 -180 ~ 180입니다.

  • Type : Boolean
  • Default : false

extend.gaugeNew.ticks.majorTicks.show

#2.0.65

사용되는 범위의 최소값부터 최대값 사이에 눈금을 보여줄지 여부를 설정합니다.

  • Type : Boolean
  • Default : false

extend.gaugeNew.ticks.majorTicks.style

#2.0.65

눈금의 형태를 설정합니다. : line, circle, triangle 세 종류가 있습니다.

  • Type : String
  • Default : "line"

extend.gaugeNew.ticks.majorTicks.length

#2.0.65

눈금의 크기(길이)를 설정합니다.

  • Type : Number
  • Default : 4

extend.gaugeNew.ticks.majorTicks.startPosition

#2.0.65

눈금의 시작위치를 지정합니다. 시작위치는 사용되는 원의 테두리가 기준으로 양수를 주면 중심방향으로 이동합니다.

  • Type : Number
  • Default : 0

extend.gaugeNew.ticks.majorTicks.interval

#2.0.65

눈금의 간격을 설정합니다. 눈금 갯수가 간격에 따라 달라집니다.

  • Type : Number
  • Default : 10

extend.gaugeNew.ticks.majorTicks.strokeWidth

#2.0.65

눈금의 stroke 두께를 설정합니다.

  • Type : Number
  • Default : 1

extend.gaugeNew.ticks.majorTicks.strokeColor

#2.0.65

눈금의 stroke 색상을 설정합니다.

  • Type : String
  • Default : "black"

extend.gaugeNew.ticks.majorTicks.fillColor

#2.0.65

눈금의 내부 색상을 설정합니다.

  • Type : String
  • Default : "black"

extend.gaugeNew.ticks.majorTicks.showLabel

#2.0.65

눈금의 라벨을 보여줄지 여부를 설정합니다.

현재 minor 눈금설정에서는 이 기능이 지원되지 않습니다.

  • Type : Boolean
  • Default : true

extend.gaugeNew.ticks.majorTicks.labelPosition

#2.0.65

눈금 라벨의 위치를 지정합니다. 시작위치는 사용되는 원의 테두리가 기준으로 양수를 주면 중심방향으로 이동합니다.

현재 minor 눈금설정에서는 이 기능이 지원되지 않습니다.

  • Type : Number

extend.gaugeNew.ticks.majorTicks.labelDirection

#2.0.65

눈금 라벨의 방향을 지정합니다. false일 경우 수직으로 방향이 정해지며, true인경우 원의 중심방향으로 전환됩니다.

현재 minor 눈금설정에서는 이 기능이 지원되지 않습니다.

  • Type : Boolean
  • Default : false

extend.gaugeNew.ticks.majorTicks.circleRadius

#2.0.65

눈금의 style이 circle일 경우에 사용되며, 원형 눈금의 반지름을 설정합니다.

  • Type : Number
  • Default : 2

extend.gaugeNew.pointer.startPosition

#2.0.65

Pointer의 시작위치를 지정합니다. 시작위치는 사용되는 원의 테두리가 기준으로 양수를 주면 중심방향으로 이동합니다.

  • Type : Number
  • Default : 0

extend.gaugeNew.pointer.length

#2.0.65

Pointer의 크기(길이)를 지정합니다. 시작위치에서 총 길이를 설정합니다.

  • Type : Number
  • Default : 0

extend.gaugeNew.pointer.pointerStyle.show

#2.0.65

Pointer의 막대부분을 표시할지 여부를 설정합니다.

  • Type : Boolean
  • Default : true

extend.gaugeNew.pointer.pointerStyle.style

#2.0.65

Pointer 막대부분의 style(2가지)을 설정합니다. : line, pentagon

pentagon으로 설정시 아래의 옵션들을 이용하여 다양한 모양으로 만들 수 있습니다.

  • Type : String
  • Default : "line"

extend.gaugeNew.pointer.pointerStyle.strokeWidth

#2.0.65

Pointer 막대부분의 stroke 두께를 설정합니다.

  • Type : Number
  • Default : 1

extend.gaugeNew.pointer.pointerStyle.strokeColor

#2.0.65

Pointer 막대부분의 stroke 색상을 설정합니다.

  • Type : String
  • Default : "black"

extend.gaugeNew.pointer.pointerStyle.fillColor

#2.0.65

Pointer 막대부분의 내부 색상을 설정합니다.

  • Type : String
  • Default : "black"

extend.gaugeNew.pointer.pointerStyle.opacity

#2.0.65

Pointer 막대부분의 투명도를 설정합니다. (범위: 0 ~ 1)

  • Type : Number
  • Default : 1

extend.gaugeNew.pointer.pointerStyle.lineCap

#2.0.65

Pointer의 막대부분의 끝부분을 round로 처리할 것인지를 여부를 설정합니다. ( line style인 경우 )

  • Type : String
  • Default : "" --> 이용할 경우 "round"로 변경

extend.gaugeNew.pointer.pointerStyle.midPosition

#2.0.65

Pointer style을 "pentagon"으로 설정한 경우, 중간 볼록한 부분의 시작위치를 지정합니다.

Pointer 막대의 시작부분에서의 거리()를 나타낸다.

  • Type : Number
  • Default : 20

extend.gaugeNew.pointer.pointerStyle.midWidth

#2.0.65

Pointer style을 "pentagon"으로 설정한 경우, 중간 볼록한 부분의 넓이를 지정합니다.

  • Type : Number
  • Default : 10

extend.gaugeNew.pointer.pointerStyle.endWidth

#2.0.65

Pointer style을 "pentagon"으로 설정한 경우, 끝부분의 넓이를 지정합니다.

  • Type : Number
  • Default : 5

extend.gaugeNew.pointer.pointerCircle.show

#2.0.65

Pointer의 중심원을 표시할지 여부를 설정합니다.

  • Type : Boolean
  • Default : true

extend.gaugeNew.pointer.pointerCircle.radius

#2.0.65

Pointer의 중심원의 반지름을 설정합니다.

  • Type : Number
  • Default : 2

extend.gaugeNew.pointer.pointerCircle.useGradation

#2.0.65

Pointer의 중심원의 내부색상에 gradation을 적용할 지 여부를 설정합니다.

  • Type : Boolean
  • Default : false

extend.gaugeNew.drawValue.label.show

#2.0.65

Value값을 표시할 지 여부를 설정합니다.

  • Type : Boolean
  • Default : true

extend.gaugeNew.drawValue.label.format

#2.0.65

함수형태로써 Value값의 format을 설정합니다.

  • Type : Function

extend.gaugeNew.drawValue.label.posX

#2.0.65

Value값의 표시할 위치중 x좌표를 설정합니다.

기준 0 값은 차트의 가운데의 x좌료입니다. 음수를 주면 왼쪽으로 양수를 주면 오른쪽으로 이동합니다.

  • Type : Number
  • Default : 0

extend.gaugeNew.drawValue.label.posY

#2.0.65

Value값의 표시할 위치중 y좌표를 설정합니다.

기준 0 값은 차트의 가운데의 y좌료입니다. 음수를 주면 위쪽으로 양수를 주면 아래쪽으로 이동합니다.

  • Type : Number
  • Default : 0

extend.gaugeNew.drawValue.circle.show

#2.0.65

Value값에 해당하는 영역만큼 mainCircle위에 값만큼의 arc영역을 추가로 표시할 지 여부를 설정합니다.

  • Type : Boolean
  • Default : false

extend.gaugeNew.drawValue.circle.strokeWidth

#2.0.65

circle.show 설정시 그리는 arc영역의 stroke의 두께를 설정합니다.

  • Type : Number
  • Default : 1

extend.gaugeNew.drawValue.circle.strokeColor

#2.0.65

circle.show 설정시 그리는 arc영역의 stroke의 색상을 설정합니다.

  • Type : String
  • Default : "black"

extend.gaugeNew.drawValue.circle.fillColor

#2.0.65

circle.show 설정시 그리는 arc영역의 내부 색상을 설정합니다.

  • Type : String
  • Default : "black"

extend.gaugeNew.drawValue.circle.opacity

#2.0.65

circle.show 설정시 그리는 arc영역의 투명도를 설정합니다.

  • Type : Number
  • Default : 1

extend.gaugeNew.drawValue.circle.useGradation

#2.0.65

circle.show 설정시 그리는 arc영역의 내부색상에서 gradation을 사용할 지 여부를 설정합니다.

  • Type : Boolean
  • Default : false