时间戳

首页 > 解决方案 > 如何在chartjs和角度中的自定义工具提示和普通工具提示之间切换

javascript - 如何在chartjs和角度中的自定义工具提示和普通工具提示之间切换

问题描述

我必须根据某些条件显示工具提示

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

首次显示自定义工具提示，因为“tooltipCondition”值为 false，将tooltipCondition值更改为 true 后，工具提示仍显示自定义工具提示，而应显示默认chartjs工具提示

标签： javascriptangularchart.js

解决方案

更改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>

推荐阅读