App Inventor學習記錄190-支援折線圖等 5種圖表的外掛~ChartMakerPlus

連續介紹兩個很強大,但我又用不熟的外掛,總覺得很心虛。不過真的還是得介紹一下這一個,支援折線圖等 5種圖表的外掛~ChartMakerPlus

記錄一下:
App Inventor學習記錄190-支援折線圖等 5種圖表的外掛~ChartMakerPlus


這次的範例,我照著外掛上的教學就已經很吃力的,所以有做錯或是說錯的部份,請大家包涵。
完成品如下。

按下按鈕之後,可以切換 5種不同的支援的圖片。
這個的圖表是用 google chart做的,所以沒有網路的時候應該是不能用的。
想到沒網路就不能用這個問題,本來就想跳過這個外掛,但真的太值得介紹。


畫面編排的部份如下。

這裡的圖片主要會顯示在 webviewer元件上,所以一定要拉一個進來


pie chart,圓餅圖的型式如下。


pie chart,圓餅圖,它的程式方塊是這樣子的。

請大家參考著看,我也不是很了解,我目前就是照著做一份,然後試著去改他的參數看看會有什麼效果出現。
更多pie chart,圓餅圖參數參考如下:
https://developers.google.com/chart/interactive/docs/gallery/piechart#configuration-options


bar chart,條狀圖如下,它是動態的,這個好酷。


bar chart,條狀圖的程式方塊如下。

更多 bar chart,條狀圖參數參考如下:
https://developers.google.com/chart/interactive/docs/gallery/barchart#configuration-options


table chart,表格圖如下。


table chart,表格圖的程式方塊如下。

更多 table chart,表格圖參數參考如下:
https://developers.google.com/chart/interactive/docs/gallery/table#configuration-options


column chart,柱狀圖如下。


column chart,柱狀圖的程式方塊如下。

更多 column chart,柱狀圖參數參考如下:
https://developers.google.com/chart/interactive/docs/gallery/columnchart#configuration-options


line chart,折線圖如下。


line chart折線圖的程式方塊如下。

更多 line chart,折線圖參數參考如下:
https://developers.google.com/chart/interactive/docs/gallery/columnchart#configuration-options

好的,全部的程式方塊都簡單說明過了,建議大家試著做一次,就會用的越來越熟。
但如果不想要重新拉程式方塊,或要需要範例 aia檔的話,請前往第 2頁哦!

發佈留言