在浏览器中将图表指定为网址或 <img>
标记称为 GET 请求。发出 GET 请求很简单,但 GET 网址长度上限为 2000 个字符。如果您的数据比这个数据多,该怎么办?
幸运的是,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()
处理程序中 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>
将此图表加载到另一个页面中,如下所示:
another_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 网页,如下所示:
another_page.html
<img width='600' height='200' src='chartserver-image.php'>