如何在chartjs和angular中的自定義工具提示和普通工具提示之間切換

Question

我必須根據某些條件顯示工具提示

    options: {
        tooltips: tooltipCondition=== true ? 
       { mode: 'index', position: 'nearest' } : 
       {enabled: false, custom: function (tooltipModel) { // code } } 
     }

首次顯示自定義工具提示是因為“tooltipCondition”值為 false，在將tooltipCondition值更改為 true 后，工具提示仍顯示自定義工具提示，而應顯示默認的chartjs工具提示

Answer 1

更改現有圖表上的tooltip選項后，您必須調用chart.update() 。

例如，如果您讓用戶在默認和自定義工具提示模式之間切換，您可以按如下方式定義onclick事件處理程序。

<input type="checkbox" onclick='enableCustomTooltip(this.checked)'> Custom Tooltip
...
const enableCustomTooltip = function(enabled) {
  if (enabled) {    
    chart.options.tooltips = { enabled: false, custom: (tooltipModel) => customTooltip(tooltipModel) };
  } else {
    chart.options.tooltips = { enabled: true };
  }
  chart.update();
};

請根據Chart.js 文檔中的代碼查看以下圖表，看看它是如何工作的。

 const customTooltip = function(tooltipModel) { var tooltipEl = document.getElementById('chartjs-tooltip'); if (!tooltipEl) { tooltipEl = document.createElement('div'); tooltipEl.id = 'chartjs-tooltip'; tooltipEl.innerHTML = '<table></table>'; document.body.appendChild(tooltipEl); } if (tooltipModel.opacity === 0) { tooltipEl.style.opacity = 0; return; } 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; } 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; } var position = chart.canvas.getBoundingClientRect(); 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'; }; const enableCustomTooltip = function(enabled) { if (enabled) { chart.options.tooltips = { enabled: false, custom: (tooltipModel) => customTooltip(tooltipModel) }; } else { chart.options.tooltips = { enabled: true }; } chart.update(); }; var chart = new Chart('myChart', { type: 'pie', data: { labels: ['January', 'February', 'March'], datasets: [{ data: [50445, 33655, 15900], backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'] }] }, options: { } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> <input type="checkbox" onclick='enableCustomTooltip(this.checked)'> Custom Tooltip <canvas id="myChart" height="90"></canvas>