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>