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
            }
        }
    }
});