구글 파이차트 만들기

오늘은 전 시간에 이어 Pie 차트를 만들어 보겠습니다.

 

바차트에 대해 궁금하시거나 구글차트에 대해 궁금하신 분은 아래 링크 클릭해 주세요.

 

http://neoryuee.tistory.com/91

 

 

전시간은 바차트 였고 오늘은 파이 차트입니다.

 

* 소스코드

 

<table width="98%">

<tr><td style="padding-left:20px;"><div id="chart_div" style="width:98%;height:230px;"></div></td></tr>

</table>

 

 

  

<script type="text/javascript">

google.load("visualization", "1", {'packages':["corechart"]});    

google.setOnLoadCallback(drawChart); // pie

 

function drawChart() {    

var data = new google.visualization.DataTable();

data.addColumn('string', '시간');

data.addColumn('number', '금액');

 

        data.addRows([

['00', 111270],['01', 17200],['02', 4500],['03', 0],['04', 0],['05', 0],['06', 0],['07', 0],['08', 52490],['09', 257550],['10', 352400],['11', 279230],['12', 389910],['13', 797400],['14', 428060],['15', 224310],['16', 0],['17', 0],['18', 0],['19', 0],['20', 0],['21', 0],['22', 0],['23', 0]

 

 

        ]);

 

 

var options = {     

title: '시간별 판매금액',   

fontSize: '12',

fontName: '굴림체',

'is3D':true

};        

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

chart.draw(data, options);   

data = null;

chart = null;

}  

 

 

</script>

 

 

제일 중요한 부분이 두가지인데 data.addRows 에 표시하고자하는 숫치를 구성에 맞게 해야하고, 

options 에서 그 수치 규성에 맞게 옵션치를 한뒤, 파이차트는 PieChart을 호출을 하게 되면..

 

 

위 처럼 데이터 차트가 표시가 됩니다.

 

#Pie#구글#만들기#차트#파이차트