Chart.js / Javascript 如何覆盖 Mouseout 事件侦听器

Question

我正在尝试使用 chart.js 创建带有自定义 html 工具提示的条形图。 我想在工具提示中包含一些交互式内容。 问题是默认情况下，当鼠标离开图表画布时，工具提示的不透明度变为 0。我需要覆盖 mouseout 事件，以便用户可以与工具提示进行交互。

官方文档很好，但不够全面……我找不到官方答案，所以我求助于查看开源代码和我的开发人员工具。

使用 Google Chrome 的开发人员工具，我可以单击画布并查看事件侦听器选项卡。 在 mouseout 下，我看到以下内容：

canvas#chart_0.dashboard-chart.chartjs-render-monitor   chart.js 10969

在开发人员工具中删除此侦听器可解决此问题。 当我单击链接时，我可以看到以下用于添加侦听器的代码，如果我设置了断点，我可以看到它被添加了：

...
addEventListener: function(chart, type, listener) {
        var canvas = chart.canvas;
        if (type === 'resize') {
            // Note: the resize event is not supported on all browsers.
            addResizeListener(canvas, listener, chart);
            return;
        }

        var expando = listener[EXPANDO_KEY] || (listener[EXPANDO_KEY] = {});
        var proxies = expando.proxies || (expando.proxies = {});
        var proxy = proxies[chart.id + '_' + type] = function(event) {
            listener(fromNativeEvent(event, chart));
        };

        addEventListener(canvas, type, proxy);
    },
...

悬停 我从 CDN 获取 chart.js，并且更愿意用我自己的 javascript 覆盖它，而不是滚动自定义版本的 chart.js。 不过，我不知道如何删除处理程序。 我在 chart.js 脚本加载后尝试了以下操作：

$('canvas').off('mouseout');
$('canvas#chart_0').off('mouseout');
$('canvas#chart_0.dashboard-chart.chartjs-render-monitor').off('mouseout');
$('#chart_0').off('mouseout');
$('.chartjs-render-monitor').off('mouseout');

这些选择器都没有删除事件侦听器。 我也尝试了一些效果$('canvas#chart_0')[0].removeEventListener('mouseout')但这需要侦听器作为参数，我不知道如何获得$('canvas#chart_0')[0].removeEventListener('mouseout')的引用，因为它是匿名传递的。 任何人都可以推荐一种摆脱默认事件侦听器的方法，或者一种将配置选项传递给 chart.js 以覆盖默认行为的方法吗？ 提前致谢。

Answer 1

对于以下示例，我使用了此处提供的自定义工具提示文档中提供的示例。

传递给自定义函数的对象（在本例中为tooltipModel ）具有一个tooltipModel ，当光标离开悬停的项目时，该属性将设置为0 ，如果我们忽略隐藏工具提示的行，它将保持可见，直到您悬停另一个项目.

因此，必须更改的行如下：

// Hide if no tooltip
if (tooltipModel.opacity === 0) {
   tooltipEl.style.opacity = 0; // remove this line
   return;
}

一个完整的工作示例：

 var ctx = document.getElementById('bar-chart').getContext('2d'); var chart = new Chart(ctx, { type: 'line', data: { labels: ['A', ' B', ' C'], datasets: [{ label: "Y", data: [5, 2, 0] }, { label: "Z", data: [7, 0, 3] } ] }, options: { tooltips: { enabled: false, custom: function(tooltipModel) { // Tooltip Element var tooltipEl = document.getElementById('chartjs-tooltip'); // Create element on first render if (!tooltipEl) { tooltipEl = document.createElement('div'); tooltipEl.id = 'chartjs-tooltip'; tooltipEl.innerHTML = '<table></table>'; document.body.appendChild(tooltipEl); } // Hide if no tooltip if (tooltipModel.opacity === 0) { // remove the next line //tooltipEl.style.opacity = 0; return; } // Set caret Position tooltipEl.classList.remove('above', 'below', 'no-transform'); if (tooltipModel.yAlign) { tooltipEl.classList.add(tooltipModel.yAlign); } else { tooltipEl.classList.add('no-transform'); } function getBody(bodyItem) { return bodyItem.lines; } // Set Text if (tooltipModel.body) { var titleLines = tooltipModel.title || []; var bodyLines = tooltipModel.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 = tooltipModel.labelColors[i]; var style = 'background:' + colors.backgroundColor; style += '; border-color:' + colors.borderColor; style += '; border-width: 2px'; var span = '<span style="' + style + '"></span>'; innerHtml += '<tr><td>' + span + body + '</td></tr>'; }); innerHtml += '</tbody>'; var tableRoot = tooltipEl.querySelector('table'); tableRoot.innerHTML = innerHtml; } // `this` will be the overall tooltip var position = this._chart.canvas.getBoundingClientRect(); // Display, position, and set styles for font tooltipEl.style.opacity = 1; tooltipEl.style.position = 'absolute'; tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px'; tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px'; tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily; tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px'; tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle; tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px'; tooltipEl.style.pointerEvents = 'none'; } } } });

 #chartjs-tooltip { opacity: 1; position: absolute; background: rgba(0, 0, 0, .7); color: white; border-radius: 3px; -webkit-transition: all .1s ease; transition: all .1s ease; pointer-events: none; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script> <canvas id="bar-chart" width="400" height="200"></canvas>