안녕하세요. 이지이지입니다.
이번 포스팅에서는 앱인벤터에서 차트, 그래프를 그리는 방법에 대해 다루어보도록 하겠습니다.
앱인벤터 자체에서 차트를 그릴 수는 없고, 구글 차트의 도움을 받아 그려보도록 하겠습니다.
구글 차트는 막대 그래프, 파이 차트 선형 그래프, 분산 그래프 등등 그리지 못하는 것이 없으며,
사용자가 원하는 대로 디자인을 커스터마이징할 수 있는 장점이 있습니다.
이 포스팅의 예제에서는 파이 차트를 그려보도록 하겠습니다.
| 화면 구성 |
예제 앱의 화면 구성은 매우 간단합니다.
[차트를 보여줘] 버튼을 클릭하면, 웹뷰어1에서 차트를 보여주게 됩니다.
웹뷰어1이 보여줄 구글 차트는 미디어 창에 업로드 되어있는 EG_GoogleChart.html입니다.
EG_GoogleChart.html을 통해 차트의 디자인 등이 설정 되고,
앱인벤터로부터 데이터를 받아 그 데이터에 맞게 차트를 그리게 되는 것입니다.
EG_GoogleChart.html 파일은 앱인벤터 소스 파일안에 포함되어 있습니다.
먼저 소스 파일을 다운받으시기 바랍니다.
※ Screen1의 속성 중 ShowListAsJson 속성은 반드시 체크가 되어 있어야 합니다.
| 블록 코딩 |
이지이지의 앱인벤터 예제 중에서 코딩이 가장 짧습니다.
아래 블록 코딩 몇 줄 만으로도 차트를 멋지게 그려낼 수 있습니다.
먼저 차트에 그려질 데이터 설정을 위한 블록입니다.
① 변수 이름을 Data로 정하고, 차트에 그려질 데이터를 리스트 안의 리스트 형태로 저장합니다.
② 첫 번째 리스트를 "카테고리"와 "단위"로 설정합니다. 차트 종류별로 다를 수 있습니다.
③ 두 번째 리스트 부터는 "항목"과 "값"을 저장합니다. 차트 종류별로 다를 수 있습니다.
다음은 미디어 창에 업로드된 EG_GoogleChart.html 파일에 앱인벤터의 데이터를 전달하고,
그려진 차트를 웹뷰어로 불러오는 블록입니다.
① [차트를 보여줘!]를 클릭했을 때,
② WebViewer1의 url주소를 미디어 창에 업로드한 EG_GoogleChart.html로 하여 html파일을 보여줍니다.
③ WebViewer1의 WebViewString을 변수 Data에 저장된 값으로 지정합니다.
→ WebViewString은 앱인벤터와 자바스크립트가 데이터를 주고 받을 때 사용합니다.
→ 앱인벤터에서 Set WebViewString을 사용하면
자바스크립트 코드에서는 window.AppInventor.getWebViewString()으로 앱인벤터에서 보낸 데이터를 받게 됩니다.
④ WebViewer1을 보이게 합니다. (처음에 visible 속성을 false로 지정한 경우에만 사용하면 됩니다. 소스 파일에는 visible 속성을 처음부터 true(체크 표시 함)로 해두어서 사실 사용하지 않아도 되는 블록입니다.
| EG_GoogleChart.html 이해 |
미디어 창에 올려둔 EG_GoogleChart.html 파일을 내려받아 보면 꽤 복잡해보이지만,
거의 모든 부분을 주석처리 해두어 이해하기는 쉬우실 것입니다.
그리고 수정이 필요한 부분과 불필요한 부분을 구분해 두었고, 수정이 필요한 부분은 한 군데 밖에 되지 않습니다.
EG_GoogleChart.html의 코드는 다음과 같습니다.
<html>
<head>
<!--구글 차트 Libraray를 불러옵니다. 수정 필요 없음.-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Visualizaion API와 코어차트 패키지를 로딩합니다. 수정 필요 없음.
google.charts.load('current', {'packages':['corechart']});
// Visualization API가 로딩되었을 때, drawChart 함수를 실행시킵니다. 수정 필요 없음.
google.charts.setOnLoadCallback(drawChart);
// 앱인벤터에서 차트를 그리기 위해 받아올 데이터를 위한 변수를 만듭니다. 수정 필요 없음.
Appdata = window.AppInventor.getWebViewString();
// 구글 차트에 데이터를 리스트로 전달하기 위해 변수를 만들고, 자바스크립트 배열로 바꿉니다. 수정 필요 없음.
var array = JSON.parse(Appdata);
function drawChart() {
// 구글 차트에 데이터를 입력합니다. 수정 필요 없음.
var data = new google.visualization.arrayToDataTable(array);
// 차트 모양에 대한 옵션 설정입니다.
// 자신이 원하는 모양을 위해 수정이 필요합니다.
// 구글 차트 모양에 대한 옵션은 https://developers.google.com/chart/interactive/docs/gallery 접속 후
// 원하는 차트 선택, Configuration Options를 참고합니다.
var options = {
chartArea:{left:'auto',top:0,width:'50%',height:'auto'},
legend:{alignment: 'center'}
};
// 차트를 그립니다. 수정 필요 없음.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--실제 문서에서 차트가 보이는 영역입니다.-->
<div id="chart_div"></div>
</body>
</html>
위의 코드 중 수정이 필요한 부분은 var options 한 군데 밖에 없습니다.
여기에서 차트의 크기, 색상, 글꼴, 범례, 위치... 등등등 모든 것을 사용자가 원하는 대로 커스터마이징합니다.
이 예에서는 최대한 단순화하기 위해 차트 영역과 범례의 위치만 옵션으로 설정해 두었습니다.
구글 차트의 종류 및 종류별로 옵션에 대한 설정은 다음 링크로 이동하여, 원하는 차트를 선택한 다음
Configuration Options을 보시면 상세하게 나와있습니다.
Chart Gallery | Charts | Google Developers
Our gallery provides a variety of charts designed to address your data visualization needs. These charts are based on pure HTML5/SVG technology (adopting VML for old IE versions), so no plugins are required. All of them are interactive, and many are pannab
developers.google.com
앱인벤터에서 차트 및 그래프 사용하기에 대한 포스팅은 여기까지입니다.
유용하게 사용하시구요. 어려운 점이 있다면 댓글로 남겨주시기 바랍니다.~~~
댓글