Question

我正在使用ChartJS在我的网站上创建图表。

我正在尝试创建自定义工具提示。根据{{3}}，这应该很简单：

var myPieChart = new Chart(ctx, {
    type: 'pie',
    data: data,
    options: {
        tooltips: {
            custom: function(tooltip) {
                // tooltip will be false if tooltip is not visible or should be hidden
                if (!tooltip) {
                    return;
                }
        }
      }
    }
  });

我的问题是，tooptip 从不为false，因此我的自定义工具提示始终会显示。

请参阅此documentation（第42行永不执行）

问题：tooltip永远不会错，或者我遗失了什么错误？

Answer 1

自定义工具提示选项用于在想要使用画布范围之外的HTLM / CSS创建/设置自己的工具提示时（并且根本不使用内置工具提示）。

要执行此操作，您必须在画布之外定义一个位置以包含工具提示（例如div），然后在tooltips.custom函数中使用该容器。

以下是我使用自定义工具提示在图表中间显示悬停饼图部分百分比的示例。在这个例子中，我在div内生成我的工具提示，其id为“chartjs-tooltip”。请注意我如何与div函数中的tooltips.custom进行互动，以定位和更改值。

此外，检查是否应隐藏工具提示的正确方法是检查其不透明度。工具提示对象将始终存在，但是当它不可见时，不透明度将设置为0.

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;
  }

  // Set Text
  if (tooltip.body) {
    var total = 0;

    // get the value of the datapoint
    var value = this._data.datasets[tooltip.dataPoints[0].datasetIndex].data[tooltip.dataPoints[0].index].toLocaleString();

    // calculate value of all datapoints
  this._data.datasets[tooltip.dataPoints[0].datasetIndex].data.forEach(function(e) {
      total += e;
    });

    // calculate percentage and set tooltip value
    tooltipEl.innerHTML = '<h1>' + (value / total * 100) + '%</h1>';
  }

  // calculate position of tooltip
  var centerX = (this._chartInstance.chartArea.left + this._chartInstance.chartArea.right) / 2;
  var centerY = ((this._chartInstance.chartArea.top + this._chartInstance.chartArea.bottom) / 2);

  // Display, position, and set styles for font
  tooltipEl.style.opacity = 1;
  tooltipEl.style.left = centerX + 'px';
  tooltipEl.style.top = centerY + 'px';
  tooltipEl.style.fontFamily = tooltip._fontFamily;
  tooltipEl.style.fontSize = tooltip.fontSize;
  tooltipEl.style.fontStyle = tooltip._fontStyle;
  tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
};

以下是完整的codepen example。

我希望这有助于澄清事情！

ChartJS：自定义工具提示始终显示

1 个答案: