구글 차트 - 자바스크립트

https://developers.google.com/chart/interactive/docs?hl=ko

Google 차트 사용  |  Charts  |  Google for Developers

 

자바스크립트를 사용해서 간단하게 사용할 수 있는 유용한 구글 차트이다. 

 

간단하게 스택바차트를 샘플 테스트 해봤다.

​

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">

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

​

<script>

google.charts.load('current', {packages: ['corechart', 'bar']});

google.charts.setOnLoadCallback(drawAnnotations);

​

function drawAnnotations() {

​

var data = google.visualization.arrayToDataTable([

['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',

'Western', 'Literature', { role: 'annotation' } ],

['2010', 10, 24, 20, 32, 18, 5, ''],

['2020', 16, 22, 23, 30, 16, 9, ''],

['2030', 28, 19, 29, 30, 12, 13, '']

]);

​

var options = {

isStacked: true,

height: 400,

legend: {position: 'top', maxLines: 3},

hAxis: {minValue: 0}

};

​

var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

chart.draw(data, options);

}

</script>