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