如何在chart.js中检测工具提示何时关闭？

Question

我正在将 chart.js 用于 Web 项目，并且运行良好。不过，我确实有一个问题。我正在尝试将具有 n 个数据点的折线图连接到 n 个 html div 的列表。当用户将鼠标悬停在数据点 2 上时，div 2 将突出显示并调用一个函数。那确实有效。但是，当用户取消悬停数据点 2 时，div 2 应将其样式更改回默认样式。

我的问题是：如何检测数据点上的 mouseout 事件？

这就是我定义数据点悬停时会发生什么的方式。

myChart = new Chart(ctx, {
  type: 'line',
  data: chartData,
  options: {
      title: {
      ...
      },
      tooltips: {
        enabled: true,
        custom: function(tooltip) {
          if (!tooltip) {
              return;
          }

          if(tooltip.dataPoints != null) {
            // here, the function that highlights the respective div is called, and it works fine
          }
        }
      }
    }
});

有没有悬停的东西？我发现有一个全局事件 -> mousout 选项，但我不知道如何使用它，我还认为它引用了整个图表。

谢谢！

Answer 1

不确定这是否对您有帮助，但我在堆积条形图方面遇到了类似的问题。我想在栏的顶部显示值，但我发现如果工具提示打开，则值会写在工具提示的顶部，使两者都不可读。我决定只在工具提示未显示时才显示值（如果工具提示打开则不呈现）。

结果我可以使用工具提示的不透明度设置来确定工具提示是否显示。这是非常简单的，但这是我想出的：

        options: {
            tooltips: {
                custom: function( tooltip ) {
                    if( tooltip.opacity > 0 ) {
                        console.log( "Tooltip is showing" );
                    } else {
                        console.log( "Tooltip is hidden" );
                    }
                    return;
                }
            }
        }

解决了这个问题后，我就可以保存一个全局变量，我可以在其他地方测试它以查看工具提示是否显示。