#latest #options
GaugeNew 차트 고유 옵션입니다.
extend.gaugeNew.userRadius
extend.gaugeNew.innerRadius
extend.gaugeNew.startAngle
extend.gaugeNew.endAngle
extend.gaugeNew.min
extend.gaugeNew.max
extend.gaugeNew.fullCircle
extend.gaugeNew.mainCircle.circleType
extend.gaugeNew.mainCircle.strokeWidth
extend.gaugeNew.mainCircle.strokeColor
extend.gaugeNew.mainCircle.fillColor
extend.gaugeNew.mainCircle.useGradation
extend.gaugeNew.mainCircle.useGradation.useMiddleColor
extend.gaugeNew.mainCircle.useGradation.startColor
extend.gaugeNew.mainCircle.useGradation.middleColor
extend.gaugeNew.mainCircle.useGradation.endColor
extend.gaugeNew.mainCircle.useGradation.direction
extend.gaugeNew.mainCircle.cornerRadius
extend.gaugeNew.ticks.majorTicks.show
extend.gaugeNew.ticks.majorTicks.style
extend.gaugeNew.ticks.majorTicks.length
extend.gaugeNew.ticks.majorTicks.startPosition
extend.gaugeNew.ticks.majorTicks.interval
extend.gaugeNew.ticks.majorTicks.strokeWidth
extend.gaugeNew.ticks.majorTicks.strokeColor
extend.gaugeNew.ticks.majorTicks.fillColor
extend.gaugeNew.ticks.majorTicks.showLabel
extend.gaugeNew.ticks.majorTicks.labelPosition
extend.gaugeNew.ticks.majorTicks.labelDirection
extend.gaugeNew.ticks.majorTicks.circleRadius
extend.gaugeNew.pointer.startPosition
extend.gaugeNew.pointer.length
extend.gaugeNew.pointer.pointerStyle.show
extend.gaugeNew.pointer.pointerStyle.style
extend.gaugeNew.pointer.pointerStyle.strokeWidth
extend.gaugeNew.pointer.pointerStyle.strokeColor
extend.gaugeNew.pointer.pointerStyle.fillColor
extend.gaugeNew.pointer.pointerStyle.opacity
extend.gaugeNew.pointer.pointerStyle.lineCap
extend.gaugeNew.pointer.pointerStyle.midPosition
extend.gaugeNew.pointer.pointerStyle.midWidth
extend.gaugeNew.pointer.pointerStyle.endWidth
extend.gaugeNew.pointer.pointerCircle.show
extend.gaugeNew.pointer.pointerCircle.radius
extend.gaugeNew.pointer.pointerCircle.useGradation
extend.gaugeNew.drawValue.label.show
extend.gaugeNew.drawValue.label.format
extend.gaugeNew.drawValue.label.posX
extend.gaugeNew.drawValue.label.posY
extend.gaugeNew.drawValue.circle.show
extend.gaugeNew.drawValue.circle.strokeWidth
extend.gaugeNew.drawValue.circle.strokeColor
extend.gaugeNew.drawValue.circle.fillColor
extend.gaugeNew.drawValue.circle.opacity
extend.gaugeNew.drawValue.circle.useGradation
var chart = sb.chart.render("#chartWrap", {
data: {
type: "gaugeNew",
columns: [ ['data1', 66], ],
},
legend: {
show: false,
},
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,
},
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",
},
},
},
},
},
});