AI Patents

#latest  #demo

간단한 원(pie) 및 바(bar) 차트 응용 예제입니다.

타이틀 지정 및 위치 변경, 범례 위치 변경, 차트 라벨 변경, 범례, 타이틀 스타일 조정 등


Code

#chartWrap1 .sbchart-title { font-size: 18px; } /* 타이틀 폰트 */
#chartWrap1 .sbchart-legend-background { stroke-width: 0 }	/* 범례 outline 제거 */
#chartWrap1 .sbchart-legend-item-text { font-size: 13px } /* 범례 폰트 */
#chartWrap2 .sbchart-title { font-size: 20px; } /* 타이틀 폰트 */
#chartWrap2 .sbchart-axis-x .tick text { font-size: 12px; } /* x축 tick 폰트 */
#chartWrap2 .sbchart-axis-x .tick line { display: none; } /* x축 tick hidden */
#chartWrap2 .sbchart-axis-y .tick text { font-size: 12px; fill: #aaaaaa; } /* y축 tick 폰트, 폰트색 */
#chartWrap2 .sbchart-axis-y .domain { display: none; } /* y축 선 hidden */
#chartWrap2 .sbchart-axis-y .tick line { display: none; }	/* y축 tick 선 hidden */

sb.chart.render("#chartWrap1", {
	global: {
		size: {
			width: 400, 
			height: 250
		}
	},
	data: {
		type: "pie",
		columns: [
			["US",47],
			["China", 19],
			["EU", 10],
			["Japan", 15],
			["Korea", 3],
			["Others", 5]
		],
	},
	title: { 
		text: "AI Patents by Country (Total:7,319)",
		position: "top-left"
	},
	legend: {
		position: "inset",
		inset: {
			y: 30
		}
	},
	extend: {
		pie: {
			label: {
				format: function(value, ratio, index) {
					return value;
				}
			}
		}
	}
});
sb.chart.render("#chartWrap2", {
	global: {
		size: {
			width: 400,
			height: 250
		},
		color: {
			pattern: ["#6d9eec"]
		}
	},
	data: {
		type: "bar",
		keys: {
			x: "company",
			value: ["no"]
		},
		json: [
			{company:"IBM", no:2400},
			{company:"Alphabet", no:2100},
			{company:"Microsoft", no:1550},
			{company:"Baidu", no:850},
			{company:"Aibaba", no:800}
		],
	},
	title: { 
		text: "AI Patents by Company",
		position: "top-left"
	},
	axis: {
		rotated: true,
		x: {
			type: "category",
			tick: {
				outer: false
			}
		},
		y: {
			tick: {
				values: [500, 1000, 1500, 2000],
				outer: false
			}
		}
	},
	legend: {
		show: false
	},
	grid: {
		x: { 
			show: false 
		}
	}
});