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

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

我正在尝试创建自定义工具提示。根据报告，这应该很容易：

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，因此始终显示我的自定义工具提示

请参见此（第42行从未执行）

---

问题：工具提示从来都不是错误的错误，还是我遗漏了什么？

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

为此，您必须在画布外定义一个位置来包含工具提示（例如

div

），然后在

工具提示.自定义功能中使用该容器

这是一个示例，我使用自定义工具提示在图表中间显示悬停饼图部分百分比。在本例中，我在id为“chartjs tooltip”的
div
中生成工具提示。请注意我是如何在工具提示中与这个
div
交互的。自定义
函数用于定位和更改值

此外，检查工具提示是否应隐藏的正确方法是检查其不透明度。工具提示对象将始终存在，但当它不可见时，不透明度设置为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';
};

Chart.defaults.global.tooltips.custom=函数（工具提示）{
//工具提示元素
var tooltipEl=document.getElementById（'chartjs-tooltip'）；
//如果没有工具提示，则隐藏
如果（tooltip.opacity==0）{
tooltipEl.style.opacity=0；
返回；
}
//设置文本
if（tooltip.body）{
var合计=0；
//获取数据点的值
var value=this.\u data.datasets[tooltip.dataPoints[0].datasetIndex].data[tooltip.dataPoints[0].index].toLocaleString（）；
//计算所有数据点的值
此.u data.datasets[tooltip.dataPoints[0].datasetIndex].data.forEach（函数（e）{
总数+=e；
});
//计算百分比并设置工具提示值
tooltipEl.innerHTML=''+（值/总数*100）+'%；
}
//计算工具提示的位置
var centerX=（this.\u chartInstance.chartArea.left+this.\u chartInstance.chartArea.right）/2；
var centerY=（（this.\u chartInstance.chartArea.top+this.\u chartInstance.chartArea.bottom）/2）；
//显示、定位和设置字体样式
tooltipEl.style.opacity=1；
tooltipEl.style.left=centerX+'px'；
tooltipEl.style.top=centerY+'px'；
ToolTipe.style.fontFamily=工具提示。\u fontFamily；
tooltipEl.style.fontSize=tooltip.fontSize；
tooltipEl.style.fontStyle=工具提示。\u fontStyle；
tooltipEl.style.padding=tooltip.yPadding+'px'+tooltip.xPadding+'px'；
};

这是全文

我希望这有助于澄清问题
 自定义工具提示选项用于在画布范围外使用HTLM/CSS创建/设置自己的工具提示样式（而不使用内置工具提示）

为此，您必须在画布外定义一个位置来包含工具提示（例如
div
），然后在
工具提示.自定义功能中使用该容器

这是一个示例，我使用自定义工具提示在图表中间显示悬停饼图部分百分比。在本例中，我在id为“chartjs tooltip”的
div
中生成工具提示。请注意我是如何在工具提示中与这个
div
交互的。自定义
函数用于定位和更改值

此外，检查工具提示是否应隐藏的正确方法是检查其不透明度。工具提示对象将始终存在，但当它不可见时，不透明度设置为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';
};

Chart.defaults.global.tooltips.custom=函数（工具提示）{
//工具提示元素
var tooltipEl=document.getElementById（'chartjs-tooltip'）；
//如果没有工具提示，则隐藏
如果（tooltip.opacity==0）{
tooltipEl.style.opacity=0；
返回；
}
//设置文本
if（tooltip.body）{
var合计=0；
//获取数据点的值
var value=this.\u data.datasets[tooltip.dataPoints[0].datasetIndex].data[tooltip.dataPoints[0].index].toLocaleString（）；
//计算所有数据点的值
此.u data.datasets[tooltip.dataPoints[0].datasetIndex].data.forEach（函数（e）{
总数+=e；
});
//计算百分比并设置工具提示值
tooltipEl.innerHTML=''+（值/总数*100）+'%；
}
//计算工具提示的位置
var centerX=（this.\u chartInstance.chartArea.left+this.\u chartInstance.chartArea.right）/2；
var centerY=（（this.\u chartInstance.chartArea.top+this.\u chartInstance.chartArea.bottom）/2）；
//显示、定位和设置字体样式
tooltipEl.style.opacity=1；
tooltipEl.style.left=centerX+'px'；
tooltipEl.style.top=centerY+'px'；
ToolTipe.style.fontFamily=工具提示。\u fontFamily；
tooltipEl.style.fontSize=tooltip.fontSize；
tooltipEl.style.fontStyle=工具提示。\u fontStyle；
tooltipEl.style.padding=tooltip.yPadding+'px'+tooltip.xPadding+'px'；
};

这是全文

我希望这有助于澄清问题
 太好了！我的问题是，官方文档指出，当没有显示工具提示时，工具提示是错误的。你关于检查不透明度的提示救了我一天。谢谢完美的我的问题是，官方文档指出，当没有显示工具提示时，工具提示是错误的。你关于检查不透明度的提示救了我一天。谢谢