등록일 : ,
콤보(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);
}
- 그래프색은 따로 지정하지 않은 기본색 입니다.
실행 가능한 소스
방문해 주셔서 감사드립니다 !!