php - Google/YouTube Insight 风格 "Interactive PNGs"?

Question

我一直在关注 YouTube Insight 功能，想了解他们的图表 PNG 是如何创建的。

如果您有一个视频并查看统计数据，您会得到一堆 PNG 图像，这些图像在很多方面都可以被认为是交互式的。看下图。

据我所知，一切都由 PNG 图像组成。我希望看到 flash 元素，但我没有。

例如:可以拖动、单击您选择日期范围的 slider ，图像会动态更新，而无需重新加载页面。我在想，也许会进行 ajax 样式的调用来替换图像？据我所知，它是完全无缝的。

另一个例子:您可以通过点击世界地图来选择国家。图像会立即更新以显示所选的人口统计数据。是不是像图像 map 这样简单的东西就可以用来捕捉点击？

Google/YouTube Insight screenshot http://www.mattis.st/images/google_insight.png

我的问题是:

1).如何使用数据库中的信息创建 PNG 图像？我更喜欢使用 PHP，所以如果您想朝那个方向调整您的答案。我不是在寻找任何第三方“插件”，除了 jQuery。

2).他们如何在 PNG 上创建“交互性”？

只有当您在自己的视频上查看 Google Insight 时，PNG 文件才可以点击和交互。检查视频的正常统计信息只会加载静态 PNG。

我知道 Open Flash Chart 等，但是我想创建自己的代码以尽可能多地学习并能够定制代码以供我使用。

我真的很感激任何答案。如果我不清楚，请要求澄清。

编辑:我进一步检查了 Google/YouTube 源代码，发现其中一张图片是:

<img src="http://chart.apis.google.com/chart?chs=422x110&amp;cht=lc&amp;chco=808080&amp;chd=s:At9j0jSUPJKMM&amp;chls=1&amp;chm=B,F7F7F7,0,0,0%7Ch,CCCCCC,0,-0.5,1" class="GDYWU0EBBG">

看起来像这样(从我的有效 session 中保存):

Image from source http://www.mattis.st/images/google_insight2.png

如您所见，这是没有条形和范围选择覆盖的背景 PNG 图像。

Answer 1

<div id="GEOMAP_map" style="">
  <embed type="application/x-shockwave-flash" 
    src="/insights/search/resources/544738731-geomap.swf" 
    width="500" height="310" style="undefined" id="geomap"
    name="geomap" bgcolor="#FFFFFF" quality="high"
    allowscriptaccess="always" wmode="opaque" flashvars="(...)"></div>

在我看来像是闪光灯。