POST 要求

將圖表指定為瀏覽器中的網址或是 <img> 標記，就稱為 GET 要求。發出 GET 要求很簡單，但 GET 網址最多只能有 2000 個字元。如果資料量超過這個上限，該怎麼辦？

幸好，Chart API 支援適用於 HTTP POST 的圖表要求，長度上限為 16K。這樣的好處在於使用 POST 會增加複雜性。

以下是最基本的 POST 要求範例：使用 <form> 元素：

這個圖表實際上是代管於 <iframe> 的網頁。表單程式碼如下：

<form action='https://chart.googleapis.com/chart' method='POST'>
  <input type="hidden" name="cht" value="lc"  />
  <input type="hidden" name="chtt" value="This is | my chart"  />
  <input type='hidden' name='chs' value='600x200' />
  <input type="hidden" name="chxt" value="x,y" />
  <input type='hidden' name='chd' value='t:40,20,50,20,100'/>
  <input type="submit"  />
</form>

有效的 POST 要求回應為 PNG 圖表，與 GET 要求回應相同。

使用 POST 的方法有很多種，所有這類方法都需要網頁程式碼或代管網頁的伺服器進行額外的編碼。如要使用 POST，您通常會為每個圖表建立個別的頁面，並使用 <iframe> 或 <img> 標記在主網頁中嵌入或連結至這些網頁。如下所示。

以下舉例說明將 POST 與 JavaScript 和 PHP 搭配使用。

使用 JavaScript 傳送 POST 要求

如要發出 JavaScript POST 要求，最簡單的方法是建立含有 <input> 元素圖表資料的代管網頁，並在 onLoad() 處理常式中讓 POST 要求，且頁面會取代圖表 PNG。代管這份圖表的網頁應使用 <iframe> 來加入這個網頁。圖表頁面的程式碼如下：

post_chart.html

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type='application/javascript'>
    // Send the POST when the page is loaded,
    // which will replace this whole page with the retrieved chart.
    function loadGraph() {
      var frm = document.getElementById('post_form');
      if (frm) {
       frm.submit();
      }
    }
  </script>
  </head>
  <body onload="loadGraph()">
    <form action='https://chart.googleapis.com/chart' method='POST' id='post_form'>
      <input type='hidden' name='cht' value='lc'/>
      <input type='hidden' name='chtt' value='This is | my chart'/>
      <input type='hidden' name='chs' value='300x200'/>
      <input type='hidden' name='chxt' value='x'/>
      <input type='hidden' name='chd' value='t:40,20,50,20,100'/>
      <input type='submit'/>
    </form>
  </body>
</html>

使用 <form> 元素時，您並不需要對字串進行網址編碼 (不過您仍須使用特殊字元，例如 | 來建立圖表標題中的回車字元)。

接著，只要在代管網頁中使用 <iframe> 即可將圖表載入其他網頁，如下所示：

other_page.html

<iframe src="post_chart.html" width="300" height="200"></iframe>

使用 PHP 處理 POST 要求

大多數伺服器端語言都支援明確的 POST 要求。以下示範如何使用 PHP 發出 POST 要求。這個範例的網頁產生了含有 150 個隨機值的折線圖。若要自行使用，可自訂 $chart 陣列以加入自己的值。

chartserver-image.php

<?php
  // Create some random text-encoded data for a line chart.
  header('content-type: image/png');
  $url = 'https://chart.googleapis.com/chart';
  $chd = 't:';
  for ($i = 0; $i < 150; ++$i) {
    $data = rand(0, 100000);
    $chd .= $data . ',';
  }
  $chd = substr($chd, 0, -1);

  // Add data, chart type, chart size, and scale to params.
  $chart = array(
    'cht' => 'lc',
    'chs' => '600x200',
    'chds' => '0,100000',
    'chd' => $chd);

  // Send the request, and print out the returned bytes.
  $context = stream_context_create(
    array('http' => array(
      'method' => 'POST',
      'content' => http_build_query($chart))));
  fpassthru(fopen($url, 'r', false, $context));
?>

嵌入圖表比 JavaScript 範例更容易，因為您可以直接使用 <img> 標記指向您的 POST 網頁，如下所示：

other_page.html

<img width='600' height='200' src='chartserver-image.php'>