条形图元素的HTML5 JavaScript锚点

HTML5 JavaScript Anchor for Bar Chart Element

本文关键字：JavaScript 锚点 HTML5 元素 条形图      更新时间：2023-09-26

我正在为我的应用程序创建一个HTML5页面，该页面使用标准画布绘制条形图，我希望图表中的每个条形图都有一个超链接，可以深入查看更多数据。我知道这可能是一个简单的问题，但我对JavaScript还不够熟悉，无法很容易地得到答案。我将条形图分为两部分绘制，一部分填充整个区域，然后删除"已经完成"的部分，例如：

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

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

谢谢。

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

如果用户单击了，则需要在画布中添加onclick事件侦听器，回调函数将向您发送一个带有"eventobject"的参数（请参阅http://www.w3schools.com/jsref/dom_obj_event.asp)使用它可以获得单击鼠标的X坐标和Y坐标。

然后你可以弄清楚点击的coord是否在栏中。

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

相关文章：