通过 POST 请求将 Google Chart 加载到页面中

Question

因此，我设置了一个页面来通过 POST 请求使用 Google Chart API。我有多个图表可以绘制，每个图表都有一个提交按钮，以便用户可以查看他们想要的任何图表。因此，按提交将加载图表的情况是有效的，但我想改进这一点。

理想情况下，我想要一种方法（提交按钮或链接）使用 javascript 提交表单，但获取结果并将图像动态添加到页面。我真的不知道是否可以使用一些 javascript 处理表单，将数据传递给 Google 并在不离开当前页面的情况下返回图像。那我可以吗？

我无法使用 GET （这会更容易），因为我可能会达到数据限制。另外，我这样做的方式是将这些表单生成到单个 HTML 页面中（而不是多个页面并使用 iframe 来完成我想要的操作），这要容易得多。

这是我的页面片段，其中包含一些图表。只是一个例子。

<tr class="chart-row">
   <td colspan="2">
      <form action="http://chart.apis.google.com/chart" method="POST" id="chartForm-idtestcasex2x32time">
      <input type="hidden" name="cht" value="lc">
      <input type="hidden" name="chs" value="800x375">
      <input type="hidden" name="chtt" value="Performance Graph for SingleFrameNotNullSurface Time">
      <input type="hidden" name="chts" value="FFFFFF,24">
      <input type="hidden" name="chco" value="000000">
      <input type="hidden" name="chls" value="2">
      <input type="hidden" name="chm" value="o,006A71,0,-1,4">
      <input type="hidden" name="chma" value="15,15,15,15">
      <input type="hidden" name="chf" value="bg,s,006A71|c,s,CCDDDD">
      <input type="hidden" name="chd" value="t:0.208,0.133">
      <input type="hidden" name="chds" value="0.12,0.22">
      <input type="hidden" name="chg" value="100,10">
      <input type="hidden" name="chxt" value="x,x,y,y">
      <input type="hidden" name="chxr" value="2,0.12,0.22,0.01">
      <input type="hidden" name="chxl" value="0:|140|143|1:|Build Number|3:|Time (ms)">
      <input type="hidden" name="chxp" value="1,50|3,50">
      <input type="hidden" name="chxs" value="0,FFFFFF|1,FFFFFF,16|2N*f5*,FFFFFF|3,FFFFFF,16">
      <input type="submit" value="Show Time Graph">
      </form>
   </td>
   <td colspan="2">
      <form action="http://chart.apis.google.com/chart" method="POST" id="chartForm-idtestcasex2x32fps">
      <input type="hidden" name="cht" value="lc">
      <input type="hidden" name="chs" value="800x375">
      <input type="hidden" name="chtt" value="Performance Graph for SingleFrameNotNullSurface Time">
      <input type="hidden" name="chts" value="FFFFFF,24">
      <input type="hidden" name="chco" value="000000">
      <input type="hidden" name="chls" value="2">
      <input type="hidden" name="chm" value="o,006A71,0,-1,4">
      <input type="hidden" name="chma" value="15,15,15,15">
      <input type="hidden" name="chf" value="bg,s,006A71|c,s,CCDDDD">
      <input type="hidden" name="chd" value="t:0,0">
      <input type="hidden" name="chds" value="-1,1">
      <input type="hidden" name="chg" value="100,25">
      <input type="hidden" name="chxt" value="x,x,y,y">
      <input type="hidden" name="chxr" value="2,-1,1,0.5">
      <input type="hidden" name="chxl" value="0:|140|143|1:|Build Number|3:|Average FPS">
      <input type="hidden" name="chxp" value="1,50|3,50">
      <input type="hidden" name="chxs" value="0,FFFFFF|1,FFFFFF,16|2N*f5*,FFFFFF|3,FFFFFF,16">
      <input type="submit" value="Show FPS Graph">
      </form>
   </td>
</tr>

Answer 1

您可以将参数附加到 url 并使用 javascript 将其加载为图像。

我知道您说过您可能会达到获取请求的限制，但这里摘录自： http://code.google.com/apis/chart/docs/making_charts.html 可能对您有帮助。

Google 图表使用政策

每天对 Google Chart API 的调用次数没有限制。但是，我们保留阻止任何我们认为滥用的使用的权利。如果您认为您的服务每天的 API 调用次数将超过 250,000 次，请将估算结果邮寄至 [电子邮件受保护]。