#latest #demo
#latest
#demo
Combination 차트 응용 예제 입니다. Y축 tick 조정 (y.tick.values), X축 라벨 조정, 막대영역 너비 조정 등(PC 전용)
.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 } } } });