本頁說明使用 Chart API 建立圖表的基本概念。
Google 圖表使用政策
每日可呼叫 Google Chart API 的次數沒有限制。不過我們保留權利,可封鎖任何我們認定為濫用的使用行為。
總覽
查看本文件中的圖表
本說明文件中的所有圖表圖片都是使用 Chart API 即時產生。如要查看任何圖片的網址,請按照下列步驟操作:
- 如果您使用的是 Firefox,請按一下滑鼠右鍵,然後選取 [檢視圖片] 或 [內容]。
- 如果您使用 Internet Explorer,請按一下滑鼠右鍵,然後選取 [內容]。
本文件通常會以多行列出網址,讓網址更容易閱讀。 使用 Google Chart API 時,必須在單行中提供網址。
Google Chart API 會根據網址 GET 或 POST 要求傳回圖表圖片。API 可以產生多種圖表,從圓餅圖、折線圖到 QR code 和公式,應有盡有。您所需的所有圖表資訊 (例如圖表資料、大小、顏色和標籤) 都包含在網址中。(POST 要求的部分不同,但現在不用擔心)。
如要讓簡易圖表建立完成,所有網址都必須指定圖表類型、資料和大小。您可以直接在瀏覽器中輸入這個網址,也可以在網頁中使用 <img>
標記指向該網址。例如,請點選以下連結,取得圓餅圖:
https://chart.googleapis.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Hello|World
上述連結是基本 Chart API 網址的範例。所有圖表網址的格式皆如下所示:
https://chart.googleapis.com/chart?cht=<chart_type>&chd=<chart_data>&chs=<chart_size>&...additional_parameters...
所有網址的開頭都是 https://chart.googleapis.com/chart?
,後面接著指定圖表資料和外觀的參數。參數是以連接號 (&
) 分隔的 name=value 組合,參數則可在 ?
之後以任何順序排列。所有圖表至少需要下列參數:cht
(圖表類型)、chd
(資料) 和 chs
(圖表大小)。不過,其他選項還有許多其他參數,且您可以指定圖表支援的任意數量的其他參數。
以下將詳細說明上方網址:
網址 | 元件 |
---|---|
|
|
將這個網址複製並貼到瀏覽器中,然後嘗試進行幾項變更:在資料中加入其他值 (別忘了在每個新的資料值前加上半形逗號)。新增標籤 (在每個新值前面加上 |
標記)。放大圖表。
如何製作圖表
建立圖片圖表的方法如下:
- 決定圖表類型。圖表清單請見
cht
參數指定的圖表類型。勾勒出您希望圖表包含的所有元件 (軸、標籤、背景等),然後視需要找出各種元件的像素維度 (圖表總大小、圖例大小等等)。請先詳閱適用於圖表類型的說明文件,否則可能會有不便。 - 建立圖表資料並設定格式。而是使用
chd
參數指定資料。您必須決定要使用哪種格式的資料資料:- 選擇資料格式。對於圖表資料,您可以使用簡單的文字格式。這種格式不僅易於閱讀,但會佔用更多空間,或使用其中一種編碼類型 (可傳送較小),但會限制可傳送的值範圍。
- 決定是否需要根據圖表調整資料比例。不同的格式支援不同的值範圍。建議您調整資料規模,讓資料涵蓋格式允許的完整值範圍,讓資料更明顯。您可以透過調整資料規模,讓資料符合您使用的資料格式,或者您也可以搭配自訂縮放功能使用文字格式設定。
- 視需要對資料進行編碼。如果您已選擇編碼格式,我們提供了一些 JavaScript 來協助處理其他編碼類型。
- 指定圖表大小。請使用
chs
參數指定圖表大小。如要瞭解格式和最大值,請參閱說明文件。 - 新增其他參數。每張圖表的說明文件都會列出可用的選用參數。常見選項包括標籤、標題和顏色。請注意,所有標籤或標題文字都必須以 UTF-8 編碼。請注意,許多參數可讓您輸入多個值。舉例來說,
chm
參數可讓您將形狀放在圖表上的單一資料點上。您可以使用chm
參數將形狀放在多個資料點上,但請勿在網址中多次指定chm
參數 (例如 WRONG:chm=square&chm=circle&chm=triangle
)。不過,如果參數包含多個值,就會在相同參數中的多個值之間使用「分隔符號」(例如半形逗號或垂直長條)。如果是chm
,那是長條,因此您會看到如下的內容:RIGHT:chm=square|circle|triangle
。 請參閱每個參數的詳細資料,瞭解如何指定多個參數。 - 建立網址字串。網址的開頭是
https://chart.googleapis.com/chart?
,後面接著所有必要參數 (cht
、chd
、chs
) 和選用參數。注意:如果您在<img>
標記中使用網址,必須將連結中的所有&
字元變更為&
。範例:<img src="https://chart.googleapis.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Hello|World" />
。 - 使用 GET 或 POST 取得圖片。GET 可以是直接在瀏覽器中輸入網址,或是在
<img>
標記中使用。 不過,網址大小上限為 2K,因此如果您的資料量超過 2K 上限,或主打血液,請考慮改用 POST 方法,詳情請參閱這篇文章。 - 建立可點擊的區域。您可以選擇建立圖表的圖片點擊區,以便為特定圖表元素加入超連結或點擊元素。詳情請參閱建立圖表圖片地圖。
圖表詞彙解釋
本說明文件中使用的幾個重要字詞如下:
- 系列
- 圖表中的相關資料集。序列構成的類型取決於圖表類型:在折線圖中,序列是單一線條;在圓餅圖中,每個項目都是一個片段,而所有配量都是一個序列。在長條圖中,系列是指相同資料組合中的所有長條。不同序列會並排分組或堆疊在一起,視長條圖類型而定。以下圖表展示了已分組的長條圖,其中有兩個序列,一個是深藍色,一個是淺藍色:
- 軸標籤
- 沿著每軸輸入數值或文字值。在先前的圖表中,則是「1 月」、「2 月」、「3 月」、「0」、「50」、「100」標籤。
圖表元件
以下是圖表的部分元件:
- 圖表區
- 顯示系列作品圖片的區域。詳情請參閱「圖表元件」側欄。
- 圖例
- 圖表中的一個小區塊說明系列叢書。在上方的圖表中,其中列出了「Cats」和「Dogs」的部分。
- 參數
- 網址中使用的 key=value 組合。例如:
chxt=x
,其中chxt
是參數名稱,x
則是參數值。 - GET 和 POST
- 傳送圖表網址的兩種方法。GET 通常會先在瀏覽器中輸入網址,或是將其做為
<img>
標記的來源。POST 要求則較為複雜,但可包含更多資料。使用 POST 而不是 GET 的主要原因是,POST 要求所處理的資料比 GET 要求更多 (16,000 個字元,而 2,000 個字元)。這裡涵蓋 POST。 - Pipe 字元
|
字元,通常做為參數值「分隔符號」,也就是用來分隔多個值的字元。圖表網址也會使用逗號和連接號 (&) 做為分隔符號。- 複合圖表
- 包含兩種不同圖表類型的圖表:例如包含折線的長條圖,或含有 K 線標記的折線圖。請參閱複合圖表。
最佳化
現在您已經瞭解建立圖表的基本知識,接下來請參考下列幾種最佳化方式。
使用 POST
網址上限為 2K,因此如果您的圖表資料量超過 2K,請使用 POST 而不是 GET。詳情請參閱這裡的說明。GET 是指在瀏覽器網址列輸入圖表網址,或將圖表網址做為網頁 <img>
元素的來源時。POST 需要其他語言的其他程式,例如 PHP 或 PERL。
以 JavaScript 製作圖表
您可以使用 Google Visualization API 建立圖片圖表。Google Visualization API 是以 JavaScript 為基礎的 API,提供許多工具,可用來建立、篩選及操控資料,或是查詢 Google 試算表或其他網站的資料。您可以使用 Visualization API 建立資料,然後呼叫 Image Charts API,在網頁上算繪圖表。詳情請參閱通用圖片圖表說明文件,或前往視覺化庫尋找任何標示為 (圖片) 的 Google 圖表。