时间戳

首页 > 解决方案 > Chart JS Tooltip - 将其放置在画布外的固定位置

javascript - Chart JS Tooltip - 将其放置在画布外的固定位置

问题描述

我进行了搜索，但找不到确切的答案，而且我是 ChartJS 的新手。

现在我有一个图表，它使用添加到 ChartJS 的插件在一条线的顶部绘制一条垂直线。我现在的想法是，我正在寻求使工具提示的值显示在画布上的其他地方。几乎我正在尝试重新创建类似 Robinhood 的体验。

例子

我已经创建了线路和跟踪。我唯一的问题是我想要一些文本来显示工具提示值和每个点的变化。红色圆圈是我要模拟的工具提示。它应该固定在某个位置，而不是让它出现在该点上，并且当然会根据该点更改值。

我想我在某处读过有一种方法可以用于 ChartJS，称为 getPointsAtEvent，但我不确定如何正确使用它，但如果有人可以帮助我，我将非常感激。

标签： javascriptchart.jschart.js2

解决方案

我使用 customToolTips 和 tooltip.dataPoints.length 解决了这个问题。不过，我在进行此操作时遇到的一个问题是，当您离开画布区域时，控制台中会出现错误，但不会阻止任何工作。

我不完全是如何解决这个问题，但如果有人遇到它，请告诉我：

 (http://localhost:3000/Chart.js:10917:4)
dashboard:178 Uncaught TypeError: Cannot read property 'style' of null
    at ChartElement.customTooltips (dashboard:178)
    at ChartElement.update (Chart.js:8660)
    at ChartElement.handleEvent (Chart.js:8952)
    at Chart.eventHandler (Chart.js:4679)
    at listener (Chart.js:4609)
    at HTMLCanvasElement.proxies.(anonymous)

推荐阅读