动态生成的图表如何显示工具提示

Question

有没有一种方法可以在动态创建的图像上显示工具提示。该图像是一个动态创建的图表，具有多个点，并且在特定点上的鼠标悬停时，我需要通过弹出窗口显示其他信息。

我正在使用Web Forms .NET 4.0，并使用System.Drawing和System.Drawing.Imaging命名空间。

- San A

Answer 1

如果您的唯一输出是平面图像，您可以尝试在页面中添加一个<map>，并将每个<area>的'title'属性设置为您的工具提示值。

您可以在这里了解更多有关创建地图的信息：http://www.w3schools.com/tags/tag_map.asp 本质上，您正在定义图像的区域作为热点。

- Babak Naffas

---

你有任何样例代码吗？- 我不确定我理解了 - 谢谢 - San A

阅读教程，如果您仍有疑问，请随时提问。 - Babak Naffas

snippet of code:<area shape="circle" coords="<%=X1Coord%>,<%=Y1Coord%>,8" href="#" alt="" onmouseover="tooltip.show('<%=Desciption%>');" onmouseout="tooltip.hide();" /> - San A

Answer 2

如果您确切地知道点的位置，您可以创建一个图像映射。但这将会很繁琐。

如何制作图像映射：
http://www.javascriptkit.com/howto/imagemap.shtml

我建议您使用JavaScript图表库，有很多可供选择。而且有一些好的免费库。

我们正在使用Highchart
http://www.highcharts.com/products/highstock

但这不是免费的。

- Remy

---

我知道这个点在哪里 - 你可以指引我如何创建图像映射吗？ - San A

JavaScript 图表库无法工作，因为图表是在代码后台生成的，而且这个工作单元已经完成。 - San A

实际上，您仍然可以在代码后端使用数据。只需创建一个包含数据点的数组并将其发送到客户端即可。这样会更加优美 :-) - Remy

我倾向于这样做-即动态创建图像，然后使用（saY）jQuery在鼠标悬停时显示工具提示。我可以获取点坐标... - San A

Remy，根据你之前提到的从客户端获取数据点的问题，你能推荐我使用哪些jquery插件吗？ - San A

Answer 3

你可以使用图像映射，但是为了做到这一点，你需要准确的坐标，如果你稍微偏离一点，它可能会出错。你有没有考虑使用 MS Charting？http://www.microsoft.com/download/en/details.aspx?id=14422

使用 MS Charting，所有的事情都在代码后台完成，并且它生成一个与你现在所做的方式完全相同的图像。不同之处在于，在创建数据点时，你可以设置工具提示和其他几个属性，就像这样：

DataPoint.ToolTip = "Your Tooltip Here";

如果您对它们不熟悉，那么网上有大量的文档和示例可供参考。

祝您好运！

- Ricketts

---

MSCharting不是一个选项，对于任何其他第三方工具也是如此，因此才会有这个问题！ - San A

客户需求 - 除此之外，必要的服务器端代码已经测试并实时生成图表，现在只需要为生成的数据点添加工具提示，因此提出了这个问题。 - San A