맨위로가기
 

SBCHART

닫기

GaugeNew Options

#latest  #options

GaugeNew 차트 고유 옵션입니다.

Example

Options

  • 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.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

Code

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",
            	},  
            },

            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",
                    },  
            	},  
            },

    	},
    },   
});