구글 차트

콤보차트

등록일 :

콤보(Combo) 차트

막대와 선 그래프를 합친 차트입니다.

기본 생성

isStacked 설정 바꿔보기

스크립트 로딩과 차트 초기화

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
	google.charts.load('current', {packages:['corechart']});
</script>

HTML

<div id="chart_div"></div>

<div style="text-align:center;">
	isStacked 설정 바꿔보기<br>
	<button type="button" onclick="chart_options.isStacked=false; drawChart()">false(기본값)</button>
	<button type="button" onclick="chart_options.isStacked=true; drawChart()">true</button>
</div>

자바스크립트

// 로딩 완료시 함수 실행하여 차트 생성
google.charts.setOnLoadCallback(drawChart);

// 차트 옵션을 전역으로 설정했습니다. 설정을 바꿔보는 예제를 만들기 위해서요.
var chart_options = {
	title : '그때 그시절 그것',
	width : 700,
	height : 400,
	bar : {
		groupWidth : '50%' // 예제에서 이 값을 수정
	},
	seriesType : 'bars',
	series : {3 : {type : 'line'}}, // 데이터에서 라인그래프로 만들값을 지정, 3은 순서를 의미하며 0부터 시작
	isStacked : true // 그래프 쌓기(스택), 기본값은 false
};

function drawChart(){

	// 차트 데이터
	var data = new google.visualization.arrayToDataTable([
		['년대', '항목1', '항목2', '항목3', '평균'], // 제목 그리고 항목들
		['1950', 10, 20, 30, 60], // 제목과 항목수를 맞춰주어야 합니다.
		['1960', 15, 30, 35, 80], // 마지막 값들은 라인그래프를 만들때 사용합니다.
		['1970', 20, 25, 40, 85],
		['1980', 10, 30, 20, 60],
		['1990', 5, 10, 25, 40]
	]);

	var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
	chart.draw(data, chart_options);
}

- 그래프색은 따로 지정하지 않은 기본색 입니다.

실행 가능한 소스

방문해 주셔서 감사드립니다 !!