맨위로가기
 

SBCHART

닫기

Wing Options

#latest  #options

wing 차트 고유 옵션입니다.

Options

wing.gapHeight
  • extend.wing.gapHeight

    차트간 사이 높이를 설정합니다. (default: 30)

wing.startColor
  • extend.wing.startColor

    데이터가 1개일 경우 상단 차트의 색상을 설정합니다. (default: blue)

wing.endColor
  • extend.wing.endColor

    데이터가 1개일 경우 하단 차트의 색상을 설정합니다. (default: red)

wing.wingTitle.subTitle
  • extend.wing.wingTitle.subTitle

    윙차트의 서브타이틀을 설정합니다.

    배열형태로 2개의 값을 입력받습니다.

wing.wingTitle.position
  • extend.wing.wingTitle.position

    서브타이틀을 표시할 위치를 설정합니다. (default: left)

    rotated시 left는 bottom에, right은 top에 표시됩니다.

Example

다음 차트는 공공데이터포털내 '광명시 주정차 위반 단속실적 집계 현황'을 참고하였습니다.

Code

var chart = sb.chart.render("#chartWrap", {
    title: {
        text: "2015년 주정차 위반 단속실적 집계 현황",
    },
    data: {
        type: "wing",
        json : [
            { "id" : "1월", "2015" : [8359, 4699] },
            { "id" : "2월", "2015" : [10148, 7381] },
            { "id" : "3월", "2015" : [10577, 7977] },
            { "id" : "4월", "2015" : [10314, 7644] },
            { "id" : "5월", "2015" : [9820, 7726] },
            { "id" : "6월", "2015" : [11596, 9279] },
            { "id" : "7월", "2015" : [7377, 3946] },
            { "id" : "8월", "2015" : [10058, 7202] },
            { "id" : "9월", "2015" : [9541, 7116] },
            { "id" : "10월", "2015" : [7781, 6608] },
            { "id" : "11월", "2015" : [9917, 7331] },
            { "id" : "12월", "2015" : [12035, 8157] },
        ],
        keys : {
            x : "id",
            value : ["2015"]
        },
        labels: false
    },
    legend: {
        show: false,
    },
    global: {
        size: {
            width: 1000,
    	    height: 450,
    	},
        padding: {
            left: 50,
    	    bottom: 30,
    	},
    	pattern: false,
    	color: {
            pattern: [
                 "#00BD9F","#785FFF","#83b14e","#00A9FF","#FFB840","#FF5A46"
     		],
    	},
        animation: {
            show: true,
    	}, 
        export: {
            show: true,
    	},     	
    },
    axis: {
        rotated: false,
        x: {
            type: "category",
            categories: ["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"],
            zoom: {
                type: "drag",
                maxScale: 15,
    	    },  
        },
        y: {
            zerobased: true,
            tick: {
       	        line: {show: true},    
       	    },  
       	    domain: {
       	        show: true, 
       	    }, 
    	},
    },  
    grid: {
        x: {
            show: true,
        },
        y: {
            show: true,
    	},
    },
    tooltip: {
        sort: "desc",
        format: {
            title: function(x){
                return (x+1)+"월 실적";
            },
            name: function(name, ratio, id, index){
                return name + "년도";
            },  
            value: function(value, ratio, id, index, value2){
                return value + " / " + value2;
            },    
        },
    },  
    extend: {
        wing: {
            gapHeight: 25,
            startColor: "skyblue",
            endColor: "pink",
            wingTitle: {
            	subTitle : ["부과건수","징수건수"],
            	position: "left"
            },
    	},
    },   
});
// type