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

Question

所以我有一个页面设置为通过 POST 请求使用 Google Chart API。我有多个图表可以使用提交按钮绘制每个图表，以便用户可以查看他们想要的任何图表。所以它在按下提交将加载图表的地方工作，但我想改进它。

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

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

这是我的页面的 sn-p 和一些图表。只是一个例子。

<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 将其作为图像加载。

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

Google 图表使用政策

您每天可以调用 Google Chart API 的次数没有限制。但是，我们保留阻止任何我们认为是滥用的使用的权利。如果您认为您的服务将每天进行超过 250,000 次 API 调用，请将估算值邮寄至 chart-api-notifications@google.com 告知我们。