Google/YouTube Insight 风格的“交互式 PNG”？答案

【问题标题】：Google/YouTube Insight style "Interactive PNGs"?Google/YouTube Insight 风格的“交互式 PNG”？
【发布时间】：2011-03-10 03:04:26
【问题描述】：

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

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

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

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

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

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">

看起来像这样（从我的有效会话中保存）：

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

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

【问题讨论】：

Flot之类的jQuery插件呢？
谢谢，了解 Flot 会有所帮助。
我想所有的图形都直接来自 Google Chart API code.google.com/apis/charttools/index.html

标签： php javascript html charts png

【解决方案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>

在我看来就像闪光。

【讨论】：

是的，我现在正在使用它...如果我右键单击我会得到 Flash 菜单...Mattis 是否有可能使用较新的版本（您知道 Google 如何只推出更改对某些人来说）使用 Canvas？
奇怪！我在页面上的任何源代码中都没有任何闪存参考，也许@Matt Olenik 是对的？我现在用firebug检查了代码，发现图像的来源是：chart.apis.google.com/…">
它可能是由javascript生成的。或者他们可能为不同的浏览器提供不同的标记。

【解决方案2】：

AFAIK 你总是需要一个插件来从 PHP 生成图像（无论是 GD 还是 ImageMagick）。我对 ImageMagick 没有任何经验，但我知道 GD 不是最快的猫。我不会指望它即时生成图表！

正如 justkt 所建议的，您可以使用任何 js 库来创建交互性。不需要花哨的闪光灯:)

【讨论】：

经过深思熟虑后，我相信您是对的。我倾向于开发 Flot 或类似的东西来满足我自己的需要。谢谢！

【解决方案3】：

经过深思熟虑，进一步研究了来源，并考虑了你们的回复，我得出以下结论：

1)。 PNG 是使用 Google Charts API 生成的（感谢 Tom！）。

2)。交互性是用漂亮的 javascript 编程创建的。它的无缝性令人印象深刻，我将尝试在我的项目中实现类似的东西。

感谢您的回复和您的时间。

【讨论】：