Approval rating

#latest  #demo

스택바(stackbar) 차트 응용 예제입니다.


Code

svg { font-family: AppleSDGothicNeo-Regular,Malgun Gothic,"sans-serif"; }
.sbchart-title { font-size: 18px; line-height: 21px; font-weight: bold; }
.sbchart-legend .sbchart-legend-item { font-size: 12px; line-height: 15px; }

sb.chart.render("#chartWrap", {
	global: {
		size: {
			width: 400, 
			height: 130
		},
		color: {
			pattern: ["#006BC9","#E62A22","#04B8A6","#F7B500","#86BE24","#AD9E75","#899099","#B0B7BF"]
		}
	},
	data: {
		type: "stackbar",
		columns: [
			["더불어 민주당",48.7],
			["자유한국당", 15],
			["바른미래당", 9.5],
			["정의당", 5.3],
			["민주평화당",0.4],
			["기타", 2.7],
			["없음", 11.5],
			["잘모름", 6.8]
		]
	},
	axis: {
		rotated: true,
		x: {
			show: false,
			type: "category",
			categories: ["정당 지지도"]
		},
		y: {
			show: false
		}
	},
	grid: {
		x: {
			show: false
		},
		y: {
			show: false
		}
	},
	title: { 
		text: "서울시민 정당지지도",
		position: "top-left"
	}
});