条形图元素的 HTML5 JavaScript 锚点答案

【问题标题】：HTML5 JavaScript Anchor for Bar Chart Element条形图元素的 HTML5 JavaScript 锚点
【发布时间】：2015-03-30 23:04:34
【问题描述】：

我正在为我的应用程序创建一个 HTML5 页面，该页面使用标准画布绘制条形图，并且我希望图表中的每个条形都有一个超链接以深入了解更多数据。我知道这可能是一个简单的问题，但我对 JavaScript 的熟悉程度不足以获得现成的答案。我将条形图分成两部分绘制，一次填充整个区域，然后删除“已经完成”的部分，如下所示：

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

如何为点击/触摸添加锚点？

谢谢。

【问题讨论】：

Canvas 是位图图像，您不能简单地将链接“添加”到其中。您需要在其顶部放置实际的 HTML a 元素，或者在画布元素本身上使用单击处理程序，然后根据单击的坐标确定要采取的操作。 // 有点相关：stackoverflow.com/questions/2932141/…
您可以尝试Hit regions。至少这是最现代的 API 所暗示的——不幸的是，它几乎不受支持……

标签： javascript html

【解决方案1】：

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

如果用户点击了您需要在画布上添加一个 onclick 事件侦听器，回调函数将向您发送一个带有“事件对象”的参数（请参阅http://www.w3schools.com/jsref/dom_obj_event.asp），您可以使用该参数获取鼠标所在位置的 X 和 Y 坐标点击。

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

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

【讨论】：