구글 차트

컬럼차트 기초 그리고 시작

URL : https://ktsmemo.cafe24.com/s/GoogleChart/85
등록일 :

컬럼차트 기본 생성

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

<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><!-- 여기에 차트가 생성됩니다. -->

자바스크립트

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

function drawChart() {

	// 차트 데이터 설정
	var data = google.visualization.arrayToDataTable([
		['항목', '다리수'], // 항목 정의
		['고양이', 4], // 항목, 값 (값은 숫자로 입력하면 그래프로 생성됨)
		['메뚜기', 6],
		['문어', 8],
		['오징어', 10],
		['운영자', 2],
		['달팽이', 0], // ?
		['랜덤', Math.round(Math.random() * 10)],
	]);

	// 그래프 옵션
	var options = {
		title : '다리 갯수', // 제목
		width : 600, // 가로 px
		height : 400, // 세로 px
		bar : {
			groupWidth : '80%' // 그래프 너비 설정 %
		},
		legend : {
			position : 'none' // 항목 표시 여부 (현재 설정은 안함)
		}
	};

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

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

실행 가능한 소스

위 예제에서 옵션 변경해보기

groupWidth 설정 바꿔보기

legend 설정 바꿔보기

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

<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;">
	groupWidth 설정 바꿔보기<br>
	<button type="button" onclick="chart_options.bar.groupWidth='10%'; drawChart()">20%</button>
	<button type="button" onclick="chart_options.bar.groupWidth='50%'; drawChart()">50%</button>
	<button type="button" onclick="chart_options.bar.groupWidth='120%'; drawChart()">100%</button>
</div>
<br>
<div style="text-align:center;">
	legend 설정 바꿔보기<br>
	<button type="button" onclick="chart_options.legend.position='none'; drawChart()">none</button>
	<button type="button" onclick="chart_options.legend.position='top'; drawChart()">top</button>
	<button type="button" onclick="chart_options.legend.position=''; drawChart()">기본값</button>
	<button type="button" onclick="chart_options.legend.position='right'; drawChart()">right</button>
	<button type="button" onclick="chart_options.legend.position='bottom'; drawChart()">bottom</button>
</div>

자바스크립트

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

// 설정을 바꿔보는 예제를 위해 차트 옵션을 전역으로 설정.
var chart_options = {
	title : '다리 갯수',
	width : 600,
	height : 400,
	bar : {
		groupWidth : '80%' // 예제에서 이 값을 수정
	},
	legend : {
		position : 'none' // 이걸 주석처리 해보면 ..
	}
};

function drawChart(){
	var data = google.visualization.arrayToDataTable([
		['Element', '다리수'],
		['개', 4],
		['메뚜기', 6],
		['문어', 8],
		['오징어', 10],
		['운영자', 2]
	]);

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

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

실행 가능한 소스

{role : 'annotation'} 옵션 사용으로 그래프에 설명표시

groupWidth 설정 바꿔보기

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

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

HTML

<div style="display:inline-block;" id="chart_div"></div><!-- 첫번째 그래프 -->
<div style="display:inline-block;" id="chart_div2"></div><!-- 두번째 그래프 -->

<div style="text-align:center;">
	groupWidth 설정 바꿔보기<br>
	<button type="button" onclick="chart_options.bar.groupWidth='10%'; drawChart()">20%</button>
	<button type="button" onclick="chart_options.bar.groupWidth='50%'; drawChart()">50%</button>
	<button type="button" onclick="chart_options.bar.groupWidth='120%'; drawChart()">100%</button>
</div>

자바스크립트

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

// 차트 옵션을 전역으로 설정했습니다. 설정을 바꿔보는 예제를 만들기 위해서요.
var chart_options = {
	title : '다리 갯수',
	width : 450,
	height : 300,
	bar : {
		groupWidth : '20%' // 예제에서 이 값을 수정
	},
	legend : {
		// position : 'none'
	}
};

function drawChart(){

	// 첫번째 차트 데이터
	var data = google.visualization.arrayToDataTable([
		['ㅋㅋ', '다리수', {role : 'annotation'}], // 그래프 위에 설명 추가 {role : 'annotation'}
		['개', 4, '개 4'], // 맨뒤 내용 "개 4" 는 그래프에 표시될 설명 지정 (안하면 에러남)
		['메뚜기', 6, '메뚜기 6'], // [항목이름, 값(숫자), 그래프 설명]
		['문어', 8, '문어 8']
	]);

	// 두번째 차트 데이터
	var data2 = google.visualization.arrayToDataTable([
		['동물다리', '내다리', {role : 'annotation'}],
		['달팽이', 1, '달팽이 1(?)'],
		['메뚜기', 6, '메뚜기 6'],
		['문어', 8, '문어 8']
	]);

	var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
	var chart2 = new google.visualization.ColumnChart(document.getElementById('chart_div2'));
	chart.draw(data, chart_options);
	chart2.draw(data2, chart_options);
}

실행 가능한 소스

{role : 'style'} 옵션 사용으로 그래프에 색설정

차트 그래프의 색을 설정할 수 있습니다.
groupWidth 설정 바꿔보기

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

<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;">
	groupWidth 설정 바꿔보기<br>
	<button type="button" onclick="chart_options.bar.groupWidth='10%'; drawChart()">20%</button>
	<button type="button" onclick="chart_options.bar.groupWidth='50%'; drawChart()">50%</button>
	<button type="button" onclick="chart_options.bar.groupWidth='120%'; drawChart()">100%</button>
</div>

자바스크립트

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

// 차트 옵션을 전역으로 설정했습니다. 설정을 바꿔보는 예제를 만들기 위해서요.
var chart_options = {
	title : '다리 갯수',
	width : 600,
	height : 400,
	bar : {
		groupWidth : '30%'
	},
	legend : {
		// position : 'none'
	}
};

function drawChart(){

	// 차트 데이터
	var data = new google.visualization.arrayToDataTable([
		['동물다리', '다리요', {role:'annotation'}, {role:'style'}], // 컬러 설정 추가 {role : 'style'}
		['달팽이', 1, '달팽이 1(?)', 'hotpink'],
		['메뚜기', 6, '메뚜기 6', '#8000FF'],
		['드래곤', 4, 'Dragon 4', 'red'],
		['지렁이', 0, '없음', '#8000FF'],
		['문어', 8, '문어 8', 'rgb(150,150,150)']

		// 만약 {role:'annotation'} 을 뺀다면 아래 데이터들도 변경해야 함, 순서에 맞게, 안하면 에러
		// 이렇게 : ['드래곤', 4, 'Dragon 4', 'red'] > ['드래곤', 4, 'red']
	]);

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

실행 가능한 소스

옵션에서 컬러 따로 지정하기

이 방법이 더 좋군요. ㅎ

옵션에 아래처럼 항목을 추가해 주면됩니다.
colors: ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'],

#dfdfdf, rgb(100,100,100) 같은 컬러형식도 됩니다.
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>
	<button type="button" onclick="chart_options.isStacked='percent'; drawChart()">'percent' (문자열)</button>
</div>

자바스크립트

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

var chart_options = {
	title : '무지개 그래프',
	width : 700,
	height : 400,
	colors: ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'], // 항목 갯수에 맞게 컬러 설정
	bar : { groupWidth : '80%' }, // 그래프 너비 %
	isStacked : false // 그래프 쌓기(스택), 기본값은 false
};

function drawChart(){

	// 차트 데이터
	var data = new google.visualization.arrayToDataTable([
		['년대', '빨', '주', '노', '초', '파', '남', '보'],
		['컬러', 2, 3, 4, 5, 4, 3, 2],
		['컬러', 5, 4, 3, 2, 3, 4, 5]
	]);

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

실행 가능한 소스

여러결과 그래프와 합쳐서 쌓기(스택(stack))

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>
	<button type="button" onclick="chart_options.isStacked='percent'; drawChart()">'percent' (문자열)</button>
</div>

자바스크립트

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

// 차트 옵션을 전역으로 설정했습니다. 설정을 바꿔보는 예제를 만들기 위해서요.
var chart_options = {
	title : '그때 그시절 그것',
	width : 700,
	height : 400,
	bar : {
		groupWidth : '50%'
	},
	isStacked : true // 그래프 쌓기(스택), 기본값은 false
};

function drawChart(){

	// 차트 데이터
	var data = new google.visualization.arrayToDataTable([
		['년대', '항목1', '항목2', '항목3', '항목4'], // 제목 그리고 항목들
		['1950', 10, 20, 30, 40], // 제목과 항목수를 맞춰주어야 합니다.
		['1960', 15, 30, 35, 20],
		['1970', 20, 25, 40, 30],
		['1980', 10, 30, 20, 50],
		['1990', 5, 10, 25, 55]
	]);

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

실행 가능한 소스

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