带有 HTML Canvas 的可点击线条和圆圈

Question

我正在考虑制作一个应用程序，在该应用程序中，有时会显示一个图表，该图表显示了人们在时间和空间上的地图。垂直通道是位置，水平通道是时间，每个人用一条线标识。在这个人做了有意义的事情的任何时候，他们的线上都会有一个更大的点。从概念上讲，单击该点会显示有关该特定点的数据，但单击该行上的其他任何位置会显示该人的详细信息。假设，当您将鼠标悬停在线条上时，线条应该会改变颜色，而当您将鼠标悬停在点上时，只有点会改变颜色。

我知道我可以使用 flash 轻松完成此操作，但我想知道这些天是否有任何方法可以仅使用 html 和 javascript 来完成此操作。可能吗？ （兼容性不是问题，我只针对我自己的机器。）

谢谢！

Answer 1

您可以使用画布做到这一点，但使用 SVG 可能更简单。

由于 SVG 使用 DOM，您可以获得处理点击等事件的内置方法，而不必像使用画布那样编写自己的处理代码。

有一些库可以让使用 SVG 变得更简单且跨浏览器兼容，例如 Raphael 和 Dojo 的 dojox.gfx 库。

Answer 2

您可以将点创建为覆盖divs，这样您就可以轻松处理点击等。当然，您必须非常整齐地整理定位。 但是，突出显示线将涉及手动计算点到线的距离并重新绘制。