구글에서 제공하는 Google Chart 기능을 사용을 해보자. 기본적으로 사용하는 것이 Table이며,
다른 예제들이 많이 있다.
사용하는 방법은 script을 가 head에 있지만 이를 body에서 사용을 하면된다.
https://developers.google.com/chart/interactive/docs/quick_start
- Google Chart의 Table
간단히 분석을 해보자.
<script src="https://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["table"]}); // Google Chart의 Table 기능 사용 google.setOnLoadCallback(drawTable_OLD); // Call Back 함수 등록 function drawTable_OLD() { // Call Back 함수 정의 var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('number', 'Salary'); data.addColumn('boolean', 'Full Time Employee'); // Table의 Column 등록 data.addRows([ ['Mike', {v: 10000, f: '$10,000'}, true], // Table의 Rows 등록 ['Jim', {v:8000, f: '$8,000'}, false], ['Alice', {v: 12500, f: '$12,500'}, true], ['Bob', {v: 7000, f: '$7,000'}, true] ]); var table = new google.visualization.Table(document.getElementById('table_div_example_old')); // table id : table_div_example_old 정의 table.draw(data, {showRowNumber: true, width: '100%', height: '100%'}); } </script> <script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['table']}); google.charts.setOnLoadCallback(drawTable_NEW); function drawTable_NEW() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('number', 'Salary'); data.addColumn('boolean', 'Full Time Employee'); data.addRows([ ['Mike', {v: 10000, f: '$10,000'}, true], ['Jim', {v:8000, f: '$8,000'}, false], ['Alice', {v: 12500, f: '$12,500'}, true], ['Bob', {v: 7000, f: '$7,000'}, true] ]); var table = new google.visualization.Table(document.getElementById('table_div_example_new')); table.draw(data, {showRowNumber: true, width: '100%', height: '100%'}); } </script> <br /> OLD Type Table<br /> <div id="table_div_example_old"> </div> <br /> // 위에서 정의한 table id 사용 table_div_example_old NEW Type Table<br /> <div id="table_div_example_new"> </div>
OLD Type Table
NEW Type Table
Table 관련 참조
https://developers.google.com/chart/interactive/docs/gallery/table
2. Chart Gallery
https://developers.google.com/chart/interactive/docs/gallery
https://developers.google.com/chart/
Google Chart에서 관련 예제를 제공하기 때문에 쉽게 사용이 가능하다.
보통 script를 <head> 안에 넣는데, 이를 <body> 안에 넣고 사용을 해보자
복합적으로 사용이 가능하며, event 및 animation도 사용이 가능하다
사용방법은 역시 기본은 위와 같이 사용을 하면 된다.
- 복합적으로 사용하는 예제
https://developers.google.com/chart/interactive/docs/examples#table_example
댓글 없음 :
댓글 쓰기