有没有办法把重点放在chart.js的图表上? 就像它们会变得更大或在悬停时可见?
我正在尝试构建一个固定的工具提示,您将不断捕获悬停的点,当点击画布时,它将捕获点击的点或最接近的点,并强调它并修复工具提示的值。 再次单击时,工具提示应该继续捕获悬停的点,重点应该消失。
我试图找到一种方法来做到这一点,但无法达成任何结论。使用getPointsAtEvent获取点数,然后更改属性并在画布上更新这些似乎没有结果。我尝试更新或重绘画布,但没有以任何方式改变画布。
非常欢迎任何帮助。
修改
我已经设法做点什么了。 通过自定义工具提示,我创建了一个固定的工具提示(根据要求提出)。 然后我在将使用getPointsAtEvent的画布div上使用click事件。 这有一些问题,首先它返回许多值而不是一个,这使得它不精确(一种提高精度的方法会很好)。
为了强调,我应该在顶部创建一个画布,但是这个画布会被我随后调用showtooltip删除。
再次欢迎任何帮助。
答案 0 :(得分:1)
以下是强调ChartJS中悬停图表点的3种方法:
ChartJS有built-in tooltips - 检查出来!
ChartJS还有内置的Hover,强调通过设置图表的高亮属性。某些图表类型的突出显示属性为hightlight
,其他图表类型为highlightFill
+ highlightStroke
。
或者,如果要进行一些自定义强调,可以在画布上的mousemove处理程序中使用getPointsAtEvent
。您需要监听画布的鼠标移动事件,因为画布上的各个绘图(图表点)不会引发他们自己的个别事件。这种方法很昂贵"因为你必须用每个mousemove切换点属性。你可以减少它的价格和价格。通过在图表画布上分层第二个画布,并将重点放在第二个顶部画布上。顶部帆布可以很容易地清除每个鼠标移动,使其更少"昂贵"维持。