How To – Google 차트

w3.css

Google 차트

웹 페이지에 Google 차트를 추가하는 방법을 알아보자.

Google 파이 차트

1단계) HTML 추가

간단한 기본 웹 페이지로 시작해보자.

id가 “piechart”인 <div> 요소를 추가한다.

<h1>My Web Page</h1>

<div id="piechart" style="min-height: 200px;"></div>

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

2단계) JavaScript 추가

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

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = google.visualization.arrayToDataTable([

  ['Task', 'Hours per Day'],

  ['Work', 8],

  ['Friends', 2],

  ['Eat', 2],

  ['TV', 2],

  ['Gym', 2],

  ['Sleep', 8]

]);

  var options = {'title':'My Average Day', 'width':550, 'height':400};

  var chart = new google.visualization.PieChart(document.getElementById('piechart'));

  chart.draw(data, options);

}