[App Inventor 教學] WebViewer 元件結合Google Chart - Barchart 長條圖與文氏圖

Google Chart 文件說明：https://developers.google.com/chart/image/docs/chart_playground?hl=zh-TW

Image Chart Editor：http://imagecharteditor.appspot.com/



這張圖的語法是：

http://chart.googleapis.com/chart?cht=bvg&chs=320x300&chd=t:10,40,60,80,30,20&chf=b0,lg,0,FFE7C6,0,76A4FB,1&chxt=x,y&chxs=0,ff0000,12,0,lt|1,0000ff,10,1,lt

一樣來逐個擊破吧！

&cht=bvg   圖表類型為 bvg

&chs=320x300   圖表尺寸，此處建議與WebViewer尺寸相同

&chd=t:10,40,60,80,30,20   資料內容為：(10,40,60,80,30,20)等六筆資料

&chf=b0,lg,0,FFE7C6,0,76A4FB,1   漸層，由 FFE7C6 逐漸變化到 76A4FB

&chxt=x,y  軸向

&chxs=0,ff0000,12,0,lt|1,0000ff,10,1,lt  軸標籤類型

================================================

來另一張交集圖，語法如下：

http://chart.googleapis.com/chart?chs=320x300&cht=v&chco=FF6342,ADDE63,63C6DE&chd=t:100,80,60,30,30,30,10&chdl=A|B|C



&cht=v   圖表類型

&chs=320x300

&chco=FF6342,ADDE63,63C6DE   三個圖塊的顏色

&chd=t:100,80,60,30,30,30,10    A, B, C尺寸為(100,80,60)，AB交集30, AC交集30, BC交集10

&chdl=A|B|C   標籤文字為A,B,C