Coffee Production (PC)

#latest  #demo

Combination 차트 응용 예제 입니다.

Y축 tick 조정 (y.tick.values), X축 라벨 조정, 막대영역 너비조정 등(PC 전용)


Code

.sbchart-title { font-size:16px; font-weight:bold; }	/* 타이틀 */
.sbchart-axis-x .tick line {display:none;} /* x축 tick 라인 숨김 */
.sbchart-axis-x .tick text {font-size:12px;} /* x축 tick 폰트 */
.sbchart-axis-x .sbchart-axis-x-label {font-size:14px;} /* x축 라벨폰트 */
.sbchart-axis-y .domain {display:none} /* y축 라인 숨김 */
.sbchart-axis-y .tick line {display:none;} /* y축 tick 라인 숨김 */
.sbchart-axis-y .tick text {font-size:12px;} /* y축 tick 폰트 */
.sbchart-axis-y .sbchart-axis-y-label {font-size:14px;} /* y축 라벨폰트 */
.sbchart-legend .sbchart-legend-item .sbchart-legend-item-text {font-size:12px;} /* 범례 폰트 */

sb.chart.render("#chartWrap",{
    global: {
        color: {
            pattern: ["#3366cc","#dc3912","#ff9900","#109618","#990099","#0099c6"]
        }
    },
    data : {
        types: {bolivia:"bar",ecuador:"bar",madagascar:"bar",papuanewguinea:"bar",rwanda:"bar",average:"line"},
        json: [
            {month:"2015/01", bolivia:250, ecuador:1050, madagascar:600, papuanewguinea:1250, rwanda:300, average:700},
            {month:"2015/02", bolivia:260, ecuador:950, madagascar:550, papuanewguinea:1000, rwanda:450, average:600},
            {month:"2015/03", bolivia:250, ecuador:1100, madagascar:600, papuanewguinea:800, rwanda:380, average:650},
            {month:"2015/04", bolivia:260, ecuador:700, madagascar:600, papuanewguinea:1100, rwanda:350, average:600},
            {month:"2015/05", bolivia:250, ecuador:1050, madagascar:620, papuanewguinea:1000, rwanda:250, average:650}
        ],
        keys: {
            x: "month",
            value: ["bolivia","ecuador","madagascar","papuanewguinea","rwanda","average"]
        },
        legends: {bolivia:"Bolivia",ecuador:"Ecuador",madagascar:"Madagascar",papuanewguinea:"Papua New Guinea",rwanda:"Rwanda",average:"Average"},
    },
    axis: {
        x: {
            type: "category",
            tick: {
                outer:false
            },
            label: {
                text: "Month",
                position: "outer-center"
            }
        },
        y: {
            tick: {
                values: [400,800,1200,1600]
            },
            label: {
                text: "Cups",
                position: "outer-middle"
            }
        }
    },
    title: {
        text: "Monthly Coffee Production by Country",
        position: "top-left"
    },
    grid: {
        x: {show:false}
    },
    legend: {
        position: "right",
        item: {
            tile: {width:25}
        }
    },
    extend: {
        point: {
            show:false
        },
        bar: {
            width: {
                ratio: 0.45
            }
        }
    }
});