我正在将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选项,但是我不知道如何使用它,而且我还认为它引用了整个图表。

谢谢!

最佳答案

不知道这是否对您有帮助,但是堆积条形图也有类似的问题。我想在条形图的顶部显示值,但是我发现如果工具提示处于打开状态,则这些值会写在工具提示的顶部,这两个值都不可读。我决定只在不显示工具提示时才显示这些值(如果工具提示打开则不显示)。

事实证明,我可以使用工具提示的不透明度设置来确定工具提示是否正在显示。这非常简单,但这是我想出的:

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

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

关于javascript - 如何检测何时在Chart.js中关闭工具提示?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43589773/

10-11 23:24
查看更多