POST 请求

将图表作为浏览器或 <img> 标记的网址称为 GET 请求。发出 GET 请求很简单,但 GET 网址的长度不得超过 2K 字符。如果您拥有的数据超过该数量,该怎么办?

幸运的是,Chart API 针对不超过 16K 长度的图表请求支持 HTTP POST。不过,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> 标记的形式在主页面中嵌入或链接到这些网页,如下所示。

下面提供了通过 JavaScript 和 PHP 使用 POST 的示例。

使用 JavaScript 发送 POST 请求

如需发出 JavaScript POST 请求,最简单的方法是创建一个托管表单的页面,该页面在 <input> 元素中包含图表数据,并允许该页面在其 onLoad() 处理程序中发布请求,并且该页面将会被图表 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'>