如何将图像映射添加到动态创建的 PHP gd 库图表？答案

【问题标题】：How can I add an image map to dynamically created chart of PHP gd library?如何将图像映射添加到动态创建的 PHP gd 库图表？
【发布时间】：2011-06-18 15:58:12
【问题描述】：

我正在构建一个从数据库填充的图表。现在，我想单击每个点以向下钻取一些信息给用户。我不知道如何将图像映射集成到动态创建的图表的每个元素。您能否提供有关此主题的示例代码、链接或文章。感谢并为 SO 提供更多力量。

【问题讨论】：

如果你想要一些示例代码，你能提供一个示例图吗？
我正在开发的图表是一个非常基本的条形图。例如：A=50，B=60，C=75。然后单击图表中的每个元素将为我提供更多详细信息。我正在使用我在网络上收集的 gd 代码动态创建此图。我还没有看到任何动态地将诸如 onlick/onmousehover 之类的事件附加到 gd 图像的东西。有 3rd 方插件和工具，但我认为我的应用程序不应该依赖它们。我发现这个图像映射最接近我需要实现我的要求。你能发布一个简单的代码让我开始探索这个概念吗？

标签： php gd charts imagemap

【解决方案1】：

Client-side image maps 基本上是覆盖在配置为可点击链接的图像上的设置区域。链接可以是 javascript 或指向其他页面。区域形状选项为矩形 (rect)、圆形 (circle) 和多边形 (poly)，您可以设置区域尺寸和相对于图像上的点的位置。上面的链接显示了示例。当您从服务器端脚本构建图像映射时，您可以完全控制区域（可能是整个条形图）及其相关链接（可能会导致带有标签 ID 号的查询脚本）。

基本上，您必须在脚本中构建图表两次：第一个脚本构建并提供图像，第二个脚本（主 html 视图）构建一个匹配的地图，其中包含一组坐标以适合图像。

您可能还对Server-side image maps 感兴趣。当您设置ismap 的IMG 元素属性并将图像元素包装在可单击的超链接中时，它允许用户单击图像上的任何位置，并且他们单击位置的坐标（x，y）将是与超链接一起作为额外的GET 参数自动发送。在服务器端脚本中，查找看起来像坐标的$_GET 键（如果客户端单击图像上的 x355、y71，则键名将是“355,71”）。然后，您可以将这些数字转换为动态图表上的区域。

【讨论】：

以上是我试图实现图像映射的代码。你认为我需要使用什么（客户端或服务器端）？
“服务器端”实际上可能更适合实际的地理地图。 “客户端”可能是最好的。基本上，您必须重做您在 mygraph.php 中使用的查询来构建和提供图像，这次是在您的主 html 页面中构建和提供图像映射。
例如，在mygraph.php 中，也许您有一些类似imagefilledrectangle(100, 0, 11, 10) 的代码来绘制一个表示“该组占89%”或其他内容的矩形。然后在您的主 html 页面中，您将复制：<area shape="rect" coords="100,0,11,10" href="moreinfo.php?id=<?php echo $groupID; ?>">
echo "";对于 ($i=0;$i";图像字符串（$im，2，$x-1，$y+10，$data[$i]，$black）； $x += ($x_width+20); } imagejpeg($im,'mygraph.jpeg');回声“”； echo "";