Google/YouTube Insight 风格“交互式 PNG”？
我一直在研究 YouTube Insight 功能，想了解他们的图表 PNG 是如何创建的。
如果您有一个视频并查看统计数据，您会得到一堆 PNG 图像，这些图像在很多方面都可以被认为是交互式的。看下图。
据我所知，一切都是由 PNG 图像组成的。我期望看到闪光元素，但我没有。
例如：可以拖动、单击您选择日期范围的滑块，并且图像会动态更新，而无需重新加载页面。我在想，也许会进行 ajax 风格的调用来替换图像？据我所知，这是完全无缝的。
另一个例子：您可以通过单击世界地图来选择国家。图像会立即更新以显示所选的人口统计数据。是否有像用于捕获点击的图像地图这样简单的东西？
Google/YouTube Insight 屏幕截图 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&cht=lc&chco=808080&chd=s:At9j0jSUPJKMM&chls=1&chm=B,F7F7F7,0,0,0%7Ch,CCCCCC,0,-0.5,1" class="GDYWU0EBBG">
看起来像这样（从我的有效会话中保存）：
图片来源 http://www.mattis.st/images/google_insight2.png
如您所见，这是没有条形图和范围选择的背景 PNG 图像覆盖。
I have been looking at the YouTube Insight function and want to learn how their chart PNGs are created.
If you have a video and look at the statistics, you get a bunch of PNG-images that in many ways can be considered interactive. Look at the image below.
As far as I can tell, everything consist of PNG images. I expected to see flash elements, but I do not.
For example: The slider where you chose date range can be dragged, clicked and the image updates dynamically without the page reloading. I am thinking, maybe ajax-style calls are made that replaces the image? It is totally seamless as far as I can see.
Another example: You can chose country by clicking the world map. The images are instantly updated to display the demography chosen. Are something simple as image maps used to catch the clicks?
Google/YouTube Insight screenshot http://www.mattis.st/images/google_insight.png
My questions are:
1). How do you create PNG images with information from a database? I prefer to use PHP so if you like tweak your answers in that direction. I am not looking for any third part "plugins", other than perhaps jQuery.
2). How are they creating the "interactivity" on their PNGs?
The PNGs are only clickeable and interactive when you check Google Insight on your own videos. Checking normal statistics for a video only loads static PNGs.
I know about Open Flash Chart and the likes, however I want to create my own code to learn as much as possible and be able to tailor the code for my use.
I truly appreciate any answers. Please ask for clarification if I am unclear.
EDIT: I examined the Google/YouTube source code further and found one of the images to be:
<img src="http://chart.apis.google.com/chart?chs=422x110&cht=lc&chco=808080&chd=s:At9j0jSUPJKMM&chls=1&chm=B,F7F7F7,0,0,0%7Ch,CCCCCC,0,-0.5,1" class="GDYWU0EBBG">
Which looks like this (saved from my valid session):
Image from source http://www.mattis.st/images/google_insight2.png
As you can see, this is the background PNG image without the bars and the range selection overlay.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
对我来说看起来像闪光。
Looks like flash to me.
AFAIK 你总是需要一个插件来从 PHP 生成图像（无论是 GD 或 ImageMagick）。我没有任何使用 ImageMagick 的经验，但我知道 GD 并不是最快的猫。我不会指望它能够即时生成图表！
正如 justkt 所建议的，您可以使用任何 js 库来创建交互性。不需要花哨的闪光灯:)
AFAIK you will always need a plugin to generate images from PHP (be it GD or ImageMagick). I don't have any experience with ImageMagick, but I know GD isn't the quickest of cats.. I wouldn't count on it to generate your charts on-the-fly!
And as suggested by justkt, you could use any js library to create interactivity. No fancy flash required :)
经过思考，进一步检查来源，并考虑你们所做的答复，我得出以下结论：
1）。 PNG 是使用 Google Charts API 生成的（感谢 Tom！）。
2）。交互性是通过漂亮的 JavaScript 编程创建的。它的无缝性令人印象深刻，我将尝试在我的项目中实现类似的东西。
感谢您的回复和您的时间。
After thinking about it, examining the source even more, and considering the replies you guys have made I have come to the following conclusions:
1). The PNG's are generated with the Google Charts API (thanks Tom!).
2). The interactivity is created with nifty javascript programming. The seamlessness of it is hugely impressive, and I will try to implement something alike in my project.
Thank you for your replies and your time.