如果悬停时间小于 1 秒，则不要在 Chart.js 中显示标签工具提示

问题描述

我在圆环图中有一些信息，并希望在使用鼠标访问此信息时防止工具提示闪烁。

查看下面附上的屏幕截图：

我正在尝试实施以下解决方案：

• 如果标签悬停时间少于 1 秒，则不显示标签工具提示。
• 如果标签悬停超过 1 秒（即光标停留在标签上一段时间），那么我需要显示工具提示。

查看以下JSFiddle

var chart_data = [6,5,4,3,2,1]

function chart() {
 
  var options = {
  
    type: 'doughnut',data: {
      labels: ["Red","Blue","Yellow","Green","Purple","Orange"],datasets: [{
          label: '# of Votes',data: chart_data,backgroundColor: [ "Red","Orange" ],borderWidth: 1,}
      ]
    },options: {
       cutoutPercentage : 65,responsive: false,tooltips: {
          callbacks: { label: label_tooltip }
        },}
  }
  
  var ctx = document.getElementById('chart-container').getContext('2d')
  
  new Chart(ctx,options)
  
}

function label_tooltip(item,data) {

    var index = item.index
    var name = data.labels[index]

    var value = data.datasets[0].data[index]

    var tooltip = ' ' + name + ' - ' + value

    return tooltip
}

chart()

document.getElementById('chart-info').innerHTML = chart_data.reduce((a,b) => a + b,0) + '<br>TOTAL'

解决方法

对于自定义工具提示，您需要将 enabled: false 放在工具提示选项中。我做了一个简单的例子来展示你想要的东西。它通过延迟表格的制作在 1 秒后显示自定义工具提示。如果你离开元素，它会很容易地删除它。

示例：https://jsfiddle.net/Leelenaleee/ks3wgvLp/12/

代码：

var tttimer;
Chart.defaults.global.tooltips.custom = function(tooltip) {
            
        // Tooltip Element
            var tooltipEl = document.getElementById('chartjs-tooltip');

            // Hide if no tooltip
            if (tooltip.opacity === 0) {
                tooltipEl.style.opacity = 0;
                return;
            }
      
      
      clearTimeout(tttimer);
      tttimer = setTimeout(() => {
      
            // Set caret Position
            tooltipEl.classList.remove('above','below','no-transform');
            if (tooltip.yAlign) {
                tooltipEl.classList.add(tooltip.yAlign);
            } else {
                tooltipEl.classList.add('no-transform');
            }

            function getBody(bodyItem) {
                return bodyItem.lines;
            }

            // Set Text
            if (tooltip.body) {
                var titleLines = tooltip.title || [];
                var bodyLines = tooltip.body.map(getBody);

                var innerHtml = '<thead>';

                titleLines.forEach(function(title) {
                    innerHtml += '<tr><th>' + title + '</th></tr>';
                });
                innerHtml += '</thead><tbody>';

                bodyLines.forEach(function(body,i) {
                    var colors = tooltip.labelColors[i];
                    var style = 'background:' + colors.backgroundColor;
                    style += '; border-color:' + colors.borderColor;
                    style += '; border-width: 2px';
                    var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
                    innerHtml += '<tr><td>' + span + body + '</td></tr>';
                });
                innerHtml += '</tbody>';

                var tableRoot = tooltipEl.querySelector('table');
                tableRoot.innerHTML = innerHtml;
            }

            var positionY = this._chart.canvas.offsetTop;
            var positionX = this._chart.canvas.offsetLeft;

            // Display,position,and set styles for font
            tooltipEl.style.opacity = 1;
            tooltipEl.style.left = positionX + tooltip.caretX + 'px';
            tooltipEl.style.top = positionY + tooltip.caretY + 'px';
            tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
            tooltipEl.style.fontSize = tooltip.bodyFontSize;
            tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
            tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
      },1000)
        }; 

首先清除计时器以使其工作的功劳归于 Chart.js 的维护者之一