javascript - 条形图元素的 HTML5 JavaScript anchor

Question

我正在为我的应用程序创建一个 HTML5 页面，该页面使用标准 Canvas 来绘制条形图，并且我希望图表中的每个条形都具有一个超链接以深入了解更多数据。我知道这可能是一个简单的问题，但我对 JavaScript 还不够熟悉，无法立即找到答案。我将条形图分为两部分，一旦填充整个区域，然后删除“已完成”部分，如下所示:

context.fillRect( elements[i][0], edgeOfChart, offset, 250 )
context.clearRect( elements[i][0], edgeOfChart, offset, 250.0 - heightComplete )

如何添加用于点击/触摸的 anchor ？

谢谢。

Answer 1

与 Canvas 交互有点痛苦。与其他技术中的 Canvas 相同，您必须处理元素中的鼠标/触摸事件并计算条形图的位置以了解用户是否单击它。例如在您的示例中，您有一个具有以下坐标的矩形元素[i][0]，edgeOfChart，偏移量，250

如果用户点击，您需要向 Canvas 添加一个 onclick 事件监听器，回调函数将向您发送一个带有“事件对象”的参数(参见 http://www.w3schools.com/jsref/dom_obj_event.asp )，您可以通过它获取鼠标所在的 X 和 Y 坐标点击。

然后你就可以判断点击的坐标是否在栏中。

要构建交互式图表，建议使用 SVG，它是基于元素的，每个元素可以有自己的事件处理程序。查看 SVG 了解详细信息。