#2.0.65
GaugeNew 차트에 대한 확장 옵션을 지정합니다.
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",
},
cornerRadius: 0,
},
subCircle: {
show: false,
radius: 190,
innerRadius: 170,
startAngle: -130,
endAngle: 130,
min: 0,
max: 100,
strokeWidth: 0,
strokeColor: "pink",
fillColor: "#EEEEEE",
opacity: 1,
cornerRadius: 0,
},
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",
},
},
},
},
},
#2.0.65
mainCircle 원의 반지름을 사용자가 원하는 크기로 설정합니다.
기본적으로는 size에 꽉 차도록 자동 설정됩니다.
#2.0.65
mainCircle 원의 안쪽 반지름을 사용자가 원하는 크기로 지정합니다.
기본적으로는 외부원의 반지름에 일정비율로 자동 설정됩니다.
#2.0.65
mainCircle 원의 시작 각도를 지정합니다.
기준은 y축 기준(0도)으로, 왼쪽으로 갈수록 -값이고 오른쪽으로 갈수록 양수 값입니다.
단위는 arc degree(도)이며 -180 ~ 180 사이 입니다.
#2.0.65
mainCircle 원의 끝부분의 각도를 지정합니다.
기준은 y축 기준(0도)으로, 왼쪽으로 갈수록 -값이고 오른쪽으로 갈수록 양수 값입니다.
단위는 arc degree(도)이며 -180 ~ 180 사이 입니다.
#2.0.65
mainCircle 원의 시작각도에 해당하는 데이터 범위값중 최소값을 지정합니다.
#2.0.65
mainCircle 원의 끝부분의 각도에 해당하는 데이터 범위값중 최대값을 지정합니다.
#2.0.65
GaugeNew차트에서 사용할 원의 형태를 지정합니다. ( 원 / 반원 )
false(반원)일 경우 startAngle은 최소 -90보다는 커야 하고, endAngle은 90보다 작아야 합니다.
만약 범위가 잘못되면 자동으로 -90 ~ 90으로 설정됩니다.
#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: "주의"}].
#2.0.65
mainCircle 원의 외곽선의 두께를 설정합니다.
#2.0.65
mainCircle 원의 외곽선의 색상을 설정합니다.
#2.0.65
mainCircle 원의 내부 색상을 설정합니다.
#2.0.65
mainCircle 원의 내부 색상을 gradation으로 처리할 지 여부를 설정합니다.
#2.0.65
gradation색상으로 중간색상을 사용할 지 여부를 설정합니다.
#2.0.65
gradation 시작 색상을 설정합니다.
#2.0.65
gradation 중간 색상을 설정합니다.
#2.0.65
gradation 끝 색상을 설정합니다.
#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 )
#2.0.85
mainCircle 원의 모서리를 둥글게 만듭니다.
#2.0.65
Main Circle외에 sub circle을 보여줄지 여부를 설정합니다.
Sub circle도 main처럼 radius와 innerRadius, min, max, cornerRadius 등의 값을 갖을 수 있습니다.
Radius/InnerRadius의 Default값은 main circle의 값과 동일하게 적용됩니다.
startAngle/endAngle의 Default값은 -180 ~ 180입니다.
#2.0.65
사용되는 범위의 최소값부터 최대값 사이에 눈금을 보여줄지 여부를 설정합니다.
#2.0.65
눈금의 형태를 설정합니다. : line, circle, triangle 세 종류가 있습니다.
#2.0.65
눈금의 크기(길이)를 설정합니다.
#2.0.65
눈금의 시작위치를 지정합니다. 시작위치는 사용되는 원의 테두리가 기준으로 양수를 주면 중심방향으로 이동합니다.
#2.0.65
눈금의 간격을 설정합니다. 눈금 갯수가 간격에 따라 달라집니다.
#2.0.65
눈금의 stroke 두께를 설정합니다.
#2.0.65
눈금의 stroke 색상을 설정합니다.
#2.0.65
눈금의 내부 색상을 설정합니다.
#2.0.65
눈금의 라벨을 보여줄지 여부를 설정합니다.
현재 minor 눈금설정에서는 이 기능이 지원되지 않습니다.
#2.0.65
눈금 라벨의 위치를 지정합니다. 시작위치는 사용되는 원의 테두리가 기준으로 양수를 주면 중심방향으로 이동합니다.
현재 minor 눈금설정에서는 이 기능이 지원되지 않습니다.
#2.0.65
눈금 라벨의 방향을 지정합니다. false일 경우 수직으로 방향이 정해지며, true인경우 원의 중심방향으로 전환됩니다.
현재 minor 눈금설정에서는 이 기능이 지원되지 않습니다.
#2.0.65
눈금의 style이 circle일 경우에 사용되며, 원형 눈금의 반지름을 설정합니다.
#2.0.65
Pointer의 시작위치를 지정합니다. 시작위치는 사용되는 원의 테두리가 기준으로 양수를 주면 중심방향으로 이동합니다.
#2.0.65
Pointer의 크기(길이)를 지정합니다. 시작위치에서 총 길이를 설정합니다.
#2.0.65
Pointer의 막대부분을 표시할지 여부를 설정합니다.
#2.0.65
Pointer 막대부분의 style(2가지)을 설정합니다. : line, pentagon
pentagon으로 설정시 아래의 옵션들을 이용하여 다양한 모양으로 만들 수 있습니다.
#2.0.65
Pointer 막대부분의 stroke 두께를 설정합니다.
#2.0.65
Pointer 막대부분의 stroke 색상을 설정합니다.
#2.0.65
Pointer 막대부분의 내부 색상을 설정합니다.
#2.0.65
Pointer 막대부분의 투명도를 설정합니다. (범위: 0 ~ 1)
#2.0.65
Pointer의 막대부분의 끝부분을 round로 처리할 것인지를 여부를 설정합니다. ( line style인 경우 )
#2.0.65
Pointer style을 "pentagon"으로 설정한 경우, 중간 볼록한 부분의 시작위치를 지정합니다.
Pointer 막대의 시작부분에서의 거리()를 나타낸다.
#2.0.65
Pointer style을 "pentagon"으로 설정한 경우, 중간 볼록한 부분의 넓이를 지정합니다.
#2.0.65
Pointer style을 "pentagon"으로 설정한 경우, 끝부분의 넓이를 지정합니다.
#2.0.65
Pointer의 중심원을 표시할지 여부를 설정합니다.
#2.0.65
Pointer의 중심원의 반지름을 설정합니다.
#2.0.65
Pointer의 중심원의 내부색상에 gradation을 적용할 지 여부를 설정합니다.
#2.0.65
Value값을 표시할 지 여부를 설정합니다.
#2.0.65
함수형태로써 Value값의 format을 설정합니다.
#2.0.65
Value값의 표시할 위치중 x좌표를 설정합니다.
기준 0 값은 차트의 가운데의 x좌료입니다. 음수를 주면 왼쪽으로 양수를 주면 오른쪽으로 이동합니다.
#2.0.65
Value값의 표시할 위치중 y좌표를 설정합니다.
기준 0 값은 차트의 가운데의 y좌료입니다. 음수를 주면 위쪽으로 양수를 주면 아래쪽으로 이동합니다.
#2.0.65
Value값에 해당하는 영역만큼 mainCircle위에 값만큼의 arc영역을 추가로 표시할 지 여부를 설정합니다.
#2.0.65
circle.show 설정시 그리는 arc영역의 stroke의 두께를 설정합니다.
#2.0.65
circle.show 설정시 그리는 arc영역의 stroke의 색상을 설정합니다.
#2.0.65
circle.show 설정시 그리는 arc영역의 내부 색상을 설정합니다.
#2.0.65
circle.show 설정시 그리는 arc영역의 투명도를 설정합니다.
#2.0.65
circle.show 설정시 그리는 arc영역의 내부색상에서 gradation을 사용할 지 여부를 설정합니다.