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

【问题标题】：Don't show label tooltip in Chart.js if hover is less than 1 second如果悬停时间小于 1 秒，则不在 Chart.js 中显示标签工具提示
【发布时间】：2021-05-04 09:51:18
【问题描述】：

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

查看下面的截图：

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

如果标签悬停时间少于 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", "Blue", "Yellow", "Green", "Purple", "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'

【问题讨论】：

你的fiddle好像坏了，文字不在甜甜圈中间，甜甜圈很小
哦。那是因为responsive: true - 忘记在 StackOverflow 上更新它。现在应该可以了。最好使用小提琴链接 - jsfiddle.net/7ev2tnsb

标签： javascript chart.js chart.js2

【解决方案1】：

对于自定义工具提示，您需要在工具提示选项中输入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 的维护者之一

【讨论】：