Copytime

Google Chart API 筆記

Daniel · 2015-08-07 · 871 Visits · Edit

![image](http://chart.apis.google.com/chart?chtt=溼度變化圖&chm=B,76A4FB49,0,0,0&cht=lc&chs=450x200&chd=t:70.001,72,67,68,65,59,64,70,73,75,78,80&chxt=x,y&chxl=0:|Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec&chg=10,20&chm=N*f0*,000000,0,-1,11)

```
http://chart.apis.google.com/chart?chtt=溼度變化圖&chm=B,76A4FB49,0,0,0&cht=lc&chs=450x200&chd=t:70,72,67,68,65,59,64,70,73,75,78,80&chxt=x,y&chxl=0:|Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec&chg=10,20&chm=N*f0*,000000,0,-1,11
```

參數說明：

* **cht=lc** 表示要畫折線圖
* **chs=450x200** 告訴 Google 我們要的圖表尺寸為 300 像素寬與 200 像素高
* **chd=t:70,72 …** 是實際的溼度資料，資料從一月份開始填起
* **chxt=x,y** 表示我們要在 X, Y 軸上顯示標籤
* **chxl=0:|Jan|Feb|Mar …** 是設定第一個座標軸的標籤，從 1 月到 12 月。
* **chg=10,20** 表示要為圖表加上格線，10,20 表示 X 軸每 10 點一格，而 Y 軸每 20 點一格
* **chtt=溼度變化圖**，這行是設定圖表標題
* **chm=B,76A4FB49** 填充線段以下的區域，假如有多條線段的話，用小寫的 b 就會只填滿兩個線段之間的區域，跟著是 RRGGBB 的 16 進位顏色值與透明度的設定，透明度的設定 00 是完全透明，而 FF 則是完全不透明。
* **chm=N\*f0\*,000000,0,-1,11** 告訴 Google 要顯示標記的數值，型態為浮點數，精確度小數 0 位, 顏色碼為 000000 (黑色), 並使用 11 號字型顯示數值

在 ROR 裡可以這樣組裝一個連接出來：

``` ruby
<%= image_tag URI::HTTP.build(host: "chart.apis.google.com", path: "/chart", query: {
        chtt: "Yearly Enrollments for Something",
        cht: "lc",
        chs: "700x180",
        chd: "t:#{yc[:data]}",
        # chxt: "x,y,x,y",
        chxt: "x,y",
        chxl: "0:|#{yc[:months]}",
        chxr: "1,0,#{yc[:max_count]}",
        # chxp: "2,50|3,50",
        chds: "0,#{yc[:max_count]}",
        chg: "10,20",
        # chm: "B,76A4FB49",
        chm: "N*f1*,000000,0,-1,11",
        # chf: "bg,s,FFE4E1|c,s,FFFFC5"
    }.to_query), :alt => "chart"
%>

```

補充兩個參數（通常搭配使用）：

![image](http://chart.apis.google.com/chart?chtt=溼度變化圖&chm=B,76A4FB49,0,0,0&cht=lc&chs=450x200&chd=t:70,72,67,68,65,59,64,70,73,75,78,80&chxt=x,y&chxl=0:|Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec&chm=N*f1*,000000,0,-1,11&chds=0,200&chxr=1,0,200)

* **chds: "0,200"** Data Scale,將數據轉換成 0-200 範圍內的相對數值，預設是 0-100，例如原始數據 50， 會顯示在 0-100 範圍的中間位置，而在 0-200 範圍內則顯示在 1/4 的位置。
* **chxr: "1,0,200"** 左側標籤範圍，第一個數字 1 表示y軸，如果是 0 就是x軸，跟著的 0,200 是範圍，預設是 0-100

----

參考資料

* [Google Chart API 教學](http://coopermaa2nd.blogspot.com/2011/01/google-chart-api.html)

[Read More]

---- END ----

Google Chart API 筆記

Recent Posts