안녕하세요. 이지이지입니다.
이번 포스팅에서는 앱인벤터 확장 프로그램을 이용해 그래프, 차트를 만드는 방법에 대해 알아보겠습니다.
앱인벤터 강좌 카테고리에서도 자바스크립트를 이용해 그래프, 차트를 만드는 방법에 대해 다루어 보았는데요.
앱인벤터 강좌 #4 차트, 그래프 사용하기
안녕하세요. 이지이지입니다. 이번 포스팅에서는 앱인벤터에서 차트, 그래프를 그리는 방법에 대해 다루어보도록 하겠습니다. 앱인벤터 자체에서 차트를 그릴 수는 없고, 구글 차트의 도움을
egeasy.tistory.com
확장 프로그램을 사용하여 차트, 그래프를 그리는 것이 자바스크립트를 이용하는 것보다 쉽지만, 차트의 종류나 설정할 수 있는 옵션은 더 적습니다.
추천드리는 바는 여러분께서 원하는 차트를 확장 프로그램을 이용해 구현할 수 있다면 이번 포스팅을 참고하시고, 더 많은 부분이 필요하다면 강좌글을 참고하시기 바랍니다.
확장 프로그램을 이용해 만들 수 있는 차트는 [파이 차트, 표 그래프, 가로 막대 그래프, 세로 막대 그래프, 선 그래프] 다섯 가지 입니다.
차트를 만들기 위해 사용할 확장 프로그램은 ChartMakerPlus입니다.
ChartMakerPlus는 이 포스팅에서 제공하는 소스파일(.aia)에 포함되어 있어 소스 파일을 내려받아 테스트 해보시려는 분은 내려받을 필요가 없으며,
다른 프로젝트에서 사용하고자 하시는 분은 다운받으시기 바랍니다.
다음은 이번 포스팅에서 사용된 앱인벤터 소스파일입니다. 내려받아 참고하시기 바랍니다.
| 화면 구성 |
먼저 위와 같은 앱을 만들기 위해 다음과 같이 화면을 구성합니다.
- WebViewer 컴포넌트: 차트가 그려지게 됩니다.
- ChartMakerPlus 컴포넌트: 차트를 만들어 줄 컴포넌트로 Non-visible 컴포넌트입니다.
- Screen1 컴포넌트: 속성(Properties) 중 ShowListAsJson에는 반드시 체크가 되어 있어야 합니다.
나머지 소소한 부분은 소스파일을 참고하시고, 차트를 그리는 데는 영향을 미치지 않습니다.
| 블록 코딩 |
ChartMakerPlus는 구글 차트를 이용하도록 되어 있습니다.
구글 차트는 기본 설정으로만 써도 훌륭하지만, 세부 설정을 할 수 있는 요소가 각 차트, 그래프마다 무수히 많습니다.
아래 각 차트의 설명마다 구글 차트 링크를 걸어 둘테니, 더 세부적인 설정이 필요할 때 참고하시기 바랍니다.
1. 파이 차트
▶ pieData: 파이 차트에 사용할 데이터를 리스트 안의 리스트 형태로 입력합니다.
-- 첫 번째 리스트 ['활동', '비율']은 입력될 데이터의 제목이라고 생각하시면 됩니다.
-- 두 번째 리스트부터 ['일', 45.8] ... 마지막 리스트까지는 차트에 표시될 데이터 입니다.
▶ ChartMakerPlus1.PieChart: 파이차트를 그립니다.
-- webViewer: 파이 차트를 그릴 WebViewer 컴포넌트를 입력합니다.
-- arrayTable: 파이 차트에 사용될 데이터를 입력합니다.
-- title: 파이 차트의 제목에 표시될 내용을 입력합니다.
-- zoom: 줌을 이용가능하게 할지 true 또는 false를 입력합니다.
-- extraOptions: 기타 설정 내용을 입력합니다. 따로 설정할 것이 없으면 빈 텍스트를 입력합니다. 아래 다른 차트에서 사용방법이 나와 있습니다.
-- css: 적용할 css Style을 입력합니다. 따로 설정할 것이 없으면 빈 텍스트를 입력합니다. 이 포스팅에서는 따로 설명하지 않겠습니다.
Visualization: Pie Chart | Charts | Google Developers
Send feedback Visualization: Pie Chart Overview A pie chart that is rendered within the browser using SVG or VML. Displays tooltips when hovering over slices. Example google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallbac
developers.google.com
2. 표(테이블)
▶ tableData: 표에 사용될 데이터를 리스트 안의 리스트 형태로 입력합니다.
-- 첫 번째 리스트 ['선수', '주급(파운드)', '계약 유형']은 표의 첫 번째 행(header)에 표시될 내용으로 각 열의 제목이 됩니다.
-- 두 번째 리스트부터 마지막 리스트까지는 표의 데이터가 됩니다. 여기서 true는 체크표시로 false는 x로 나타납니다.
▶ ChartMakerPlus1.TableChart: 표를 그립니다.
-- rowNumbers: true로 설정하면 1열에 행 번호가 나타납니다. 해리 케인 옆에 1, 탕기 은돔벨레 옆에 2 이런 식으로 나타납니다. false로 설정하면 행 번호가 나타나지 않습니다.
-- headAlign: 표의 1행의 정렬 방법입니다. left, center, right 등으로 입력합니다.
-- cellAlign: 각 셀의 정렬 방법입니다. headAlign과 같습니다.
Visualization: Table | Charts | Google Developers
Send feedback Visualization: Table Overview A table that can be sorted and paged. Table cells can be formatted using format strings, or by directly inserting HTML as cell values. Numeric values are right-aligned; boolean values are displayed as check marks
developers.google.com
3. 가로, 세로 막대 그래프
▶ barData: 막대 그래프에 사용될 데이터를 리스트 안의 리스트 형태로 입력합니다.
-- 첫 번째 리스트에는 가로축과 세로축이 무엇을 나타내는지 입력합니다.
-- 첫 번째 리스트의 make a dictionary key "role" value "style"은 막대그래프의 색상을 설정하기 위한 것으로 두 번째 리스트부터 마지막 리스트까지의 세 번째 항목에 입력합니다.
구글 차트 문서에서 나와 있는 내용이고, 사용하지 않아도 상관 없습니다.
-- 색상은 색상이름 또는 색상코드로 입력합니다.
▶ ChartMakerPlus1.BarChart
-- extraOptions: 추가설정을 합니다. 예시에서는 애니메이션 효과를 추가로 설정한 것입니다.
-- extraOptions는 구글 차트 문서에서 Configuration options 부분에 해당합니다.
-- 차트마다 Configuration options는 다릅니다.
-- 아래 처럼 Name에 점(.)이 있다면 점 대신에 중괄호 { }를 사용하여 내용을 입력합니다.
Bar Charts | Google Developers
Send feedback Bar Charts Overview Google bar charts are rendered in the browser using SVG or VML, whichever is appropriate for the user's browser. Like all Google charts, bar charts display tooltips when the user hovers over the data. For a vertical versio
developers.google.com
4. 라인 차트
▶ lineData: 라인 차트에 사용할 데이터를 리스트 안의 리스트형태로 입력합니다.
-- 첫 번째 리스트는 가로축과 세로축이 나타내고자 하는 것입니다.
-- 두 번째 리스트부터 마지막 리스트까지가 실제 데이터로 나타납니다.
▶ ChartMakerPlus1.LineChart: 라인 차트를 그립니다.
-- extraOptions: 추가 설정을 여러 개 할 경우에는 join을 활용하고 각 항목은 콤마(,)로 구분해 줍니다.
이상 앱인벤터에서 확장 프로그램으로 차트, 그래프 만들기 였습니다.
기타 설정 부분에 관해 질문 있으시면 댓글 또는 메일 주시기 바랍니다.~
댓글