6.0 Google Chart API

Google Chart API

http://code.google.com/intl/zh-TW/apis/chart/interactive/docs/quick_start.html

 

Google Chart API

 

  

◎是一種動態建立圖表的功能,利用Google Chart API的連結參數來實現各種統計  

  圖表的製作

 

◎服務使用相當簡單,且不用安裝軟體,只需要使用瀏覽器,

  當瀏覽器打開該網頁時,Chart API 就會提供即時圖表。

 

◎而本文檔內所有圖表都由 Chart API 生成,

  查看圖片方法:

  • 如果您使用 Firefox ,在圖片上按右键後,

   選擇“查看圖片”或“屬性”。

  • 如果您使用 Internet Explorer ,在圖片上按右键後,

選擇“屬性”。

 

◎所有 Chart API URL 都應使用如下格式:

http://chart.apis.google.com/chart?<parameter 1>&<parameter 2>&<parameter n> 

 

◎多個參數使用時須以 & 作為分割符號,並且可以使用任意多個參數

 

◎可將圖表API圖片放在網頁中,透過將網址嵌入<img>標籤內,

   如圖:

 

◎Google圖表並沒有特別的次數條件限制

 

 

◎製造圖表時,必須至少提供以下參數:

   -圖表資料

   -圖表類型

   -圖表尺寸

 

◎其它參數均為可選參數,各類型圖表有效參數如下:

 

◎IE對URL也有長度限制的問題,HTTP協議規範也沒有對URL長度進行限制。   

  這個限制是指特定的瀏覽器及服務器對它的限制。

 

 

 

◎顏色方面,是使用 6 或 8 位的十六進制顏色參數,格式RRGGBB,示例:

  • FF0000= 红色
  • 00FF00= 綠色
  • 0000FF= 藍色
  • 000000= 黑色
  • FFFFFF= 白色

  其中,可以附加兩位數來設定透明度,

  代碼00與FF之間,00表示完全透明, FF表示完全不透明。

  • 0000FFFF= 不透明藍色
  • 0000FF00= 透明藍色

 

◎有效的顏色設定:

 

◎圖表當中如果使用中文需要轉換文字,網頁必須用 UTF-8 編碼,

  步驟為:

          1.以 UTF-8 編碼格式儲存網頁

          2.在 <head> 中指定 UTF-8 編碼格式

<meta content="text/html; charset=UTF-8" http-equiv="content-type" /> 

  接著 Google Chart API 的參數就可以直接使用中文了,

  像這樣:

 

 

 

◎當前已能自動產生的圖有:

  -折線圖(line charts)

  

   *以 cht = <line chart type> 指定,為lc或lxy

   *對於類型為lc圖表,是將多個資料集會製成多條線

   *對於類型為lxy圖表,每條線需要兩個資料集 

 

  -條狀圖(bar charts)

 

   *以cht = <bar chart type >指定,

     (方向參數:bhs, bvs, bhg, bvg,bvo)

   *再根據橫條圖的類型,將多個資料集繪製成堆疊式或分組式條

 

 

 

 

 

  -圓餅圖(pie charts)

  

   *以cht = <pie chart type >指定,為p或p3

   *僅支援一個資料集,後續資料即將被忽略

 

  -Venn(venn diagrams)/文氏圖/貝氏集合圖 

 

 

  -散佈圖(scatter plots)/泡泡圖 

 

   *以cht = s指定

 

  -Sparkline


   *以cht = ls指定,參數於折線圖相同,區別是軸線並非Sparkline圖預設繪製的

 

  -曲線圖

 

  -思維圖

 

  -混和圖(Compound Charts)

  

 

 

 

 

   -動態圖標/標記圖(Dynamic Icons)

  

 

  -方程式(Formulas)

  

 

  -雷達圖(Rader charts)/多構面綜合指標圖

  

  *以cht = r或cht = rs指定

  *對於r類型圖表,點與直線相連

  *對於rs類型圖表,點與樣條線相連

 

  -地圖(Map charts)/著色地圖

  

  *以cht = t和chtm = <geographical area>指定

 

  -Google指數

  

  *以cht = gom指定