등록일 : ,
컬럼차트 기본 생성
스크립트 로딩과 차트 초기화
<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) 같은 컬러형식도 됩니다.
옵션에 아래처럼 항목을 추가해 주면됩니다.
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);
}
실행 가능한 소스
방문해 주셔서 감사드립니다 !!