使用 Google Chart API 建立圖表(2) - 基礎

Google Chart API

Google Chart API會依你所送出的網址(URL)回傳一個對應的PNG格式的圖檔,這些圖表圖檔都是由Google Chart API依據URL來運算產生,圖表有幾種型式:折線圖(line)、長條圖(bar)及圓餅圖(pie)。每一種圖表都可指定屬性,像是尺寸(size)、顏色(color)及標籤(label)。

想要知道參數怎麼設定,只要在「由Google Chart API產生的圖表」上按右鍵,然後選擇屬性(FireFox)或內容(IE)即可顯示URL。可以用來參考。

URL 格式

Google Chart API URLs的格式如下:
http://chart.apis.google.com/chart?<參數 1>&<參數 2>&<參數 n>
每個參數必須使用(&)符號(ampersand character)來分隔。你可以設定許多參數而且不需要在意順序,例如下面這個網址:
http://chart.apis.google.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Hello|World
會產生下面這張圖: 參數說明:
  • http://chart.apis.google.com/chart? ->這是Google Chart API的網址
  • & :分隔字元
  • chs=250x100 :圖表的尺寸,單位是像素(pixel)
  • chd=t:60,40 :圖表的資料(data)
  • cht=p3 :圖表的類型
  • chl=Hello|World :圖表的標籤
必要或選擇性的參數,你必須至少提供下面3種類型的參數:
  • Chart Size
  • Chart Data
  • Chart Type
其他的參數則是選擇性的。Chart Type 的選擇性參數非常多,這個列表可以參考。QR Codes因為沒有選擇性參數而被省略了。

Chart Size

尺寸的參數設定如下:(單位:pixel)
chs=寬度x高度
用英文的小x來代表乘號。

除了地圖(Maps)外,圖表最大尺寸(面積)的限制是300,000pixels(長乘寬),長及寬的限制都是1000pixels。地圖(Maps)的限制是寬440pixels高220pixels。
本文網址:http://blog.tonycube.com/2009/03/google-chart-api2.html
Tony Blog 撰寫,轉載時請註明出處及文章連結,謝謝 😀

2 則留言

  1. 1.請問 Google Chart 能夠設多圖一頁嗎?在bar只看到 單一大小設定,沒有起始位置設定 'width': 2000, 'height': 2000
    2.請問 Google Chart 能用asp.net 來讀json file 嗎? 有嘗試過但遇到卡關...謝謝

    回覆刪除
    回覆
    1. 1.
      一個div區塊可以放一張圖,要多張圖就放多個div,
      這裡有說明 https://developers.google.com/chart/interactive/docs/basic_multiple_charts


      2.
      這個範例是使用 php,透過 jQuery 的 ajax 方法去取得 json 資料,asp.net做法一樣,
      https://developers.google.com/chart/interactive/docs/php_example

      刪除

留言小提醒:
1.回覆時間通常在晚上,如果太忙可能要等幾天。
2.請先瀏覽一下其他人的留言,也許有人問過同樣的問題。
3.程式碼請先將它編碼後再貼上。(線上編碼:http://bit.ly/1DL6yog)
4.文字請加上標點符號及斷行,難以閱讀者恕難回覆。
5.感謝您的留言,您的問題也可能幫助到其他有相同問題的人。