2019. 4. 3. 11:47ㆍJavaScript
# HTML 에서의 차트 적용
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ColumnChart1</title> <style>
</style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://www.gstatic.com/charts/loader.js"></script> <script> //구글 시각화 API를 로딩하는 메소드 google.charts.load('current', {packages: ['corechart']});
// 구글 시각화 API가 로딩이 완료되면, // 인자로 전달된 콜백함수를 내부적으로 호출하여 차트를 그리는 메소드 // 화면이 실행될때 함께 실행된다. //google.charts.setOnLoadCallback(columnChart1);
// 묶은 세로 막대형 차트 1 function columnChart1() { // 버튼 클릭 시 ajax를 사용하여 서버로부터 json 배열 객체를 가져왔다고 가정함 var arr = [ ['년도', '매출액', '비용'], ['2014', 1000, 400], ['2015', 1170, 460], ['2016', 660, 1120], ['2017', 1030, 540] ]; // 실 데이터를 가진 데이터테이블 객체를 반환하는 메소드 var dataTable = google.visualization.arrayToDataTable(arr); // 옵션객체 준비 var options = { title: '회사 실적', hAxis: { title: '년도', titleTextStyle: { color: 'red' } } }; // 차트를 그릴 영역인 div 객체를 가져옴 var objDiv = document.getElementById('column_chart_div1'); // 인자로 전달한 div 객체의 영역에 컬럼차트를 그릴수 있는 차트객체를 반환 var chart = new google.visualization.ColumnChart(objDiv); // 차트객체에 데이터테이블과 옵션 객체를 인자로 전달하여 차트 그리는 메소드 chart.draw(dataTable, options); } // drawColumnChart1()의 끝
// 버튼 동작 $(document).ready(function(){ $('button').on('click', function(){ columnChart1(); }); }); </script> </head> <body> <button type="button" id="btn">버튼</button> <div id="column_chart_div1" style="width: 900px; height: 500px;"></div> </body> </html> |
Cf)
30초마다 재갱신
google.charts.setOnLoadCallback(function(){
setInterval(columnChart1(),30000);
});
'JavaScript' 카테고리의 다른 글
| 이메일 전송하기 (0) | 2019.04.04 |
|---|---|
| DB연동이 된 Chart(표) 사용하기 [막대그래프,ColumnChart] (0) | 2019.04.03 |
| JSON 의 DB연동(AJAX 사용) (0) | 2019.04.03 |
| jQuery 적용하기 (0) | 2019.03.27 |
| Script 기본 사용법 (2) (0) | 2019.03.27 |