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

Question

在遵循了此处和官方文档中的几个指南后，我完全陷入了困境。

我有一些自定义工具提示，它们将根据自定义工具提示中的数据名称在其中显示 PNG 图形。

我找到了几种隐藏工具提示的解决方案，或将它们全部设置为始终显示，但它们似乎都没有像我想要的那样工作。我希望隐藏标准工具提示，并始终显示我的自定义工具提示。

我的代码如下：

.HTML：

<canvas id="pelagic" style="width:10vw;height:10vw;"></canvas>
<div id="chartjs-tooltip">
<table></table>
</div>

.CSS：

#chartjs-tooltip {
opacity: 1;
position: absolute;
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);
}
.chartjs-tooltip-key {
display: inline-block;
width: 10px;
height: 10px;
}

爪哇语

var ctx4 = document.getElementById("pelagic").getContext('2d');
var seafood_pelagic = {
"labels":["Welsh Fleet Mackerel","Herring","Other Pelagic"],
"datasets":[
{
"label":"2013",
"data":["1.90","0.50","0.30","0.30","0.30"],
"backgroundColor":["#95c11e","#007e3b","#3aa935","#14af97","#88f88f"],
"borderWidth": "2",
"borderColor":["#95c11e","#007e3b","#3aa935","#14af97","#88f88f"]
}
]
};
var seafood_pelagic = new Chart(ctx4, {
type: 'doughnut',
data: seafood_pelagic,
options: {
showAllTooltips: true,
cutoutPercentage: 85,
responsive: false,
animation: false,
legend: {
display: false
},
tooltips: {
enabled: false,
callbacks: {
label: function(tooltipItem, data) { 
var indice = tooltipItem.index;                 
return  data.labels[indice];
}
},
custom: customTooltips
}
}
});
var customTooltips = function(tooltip) {
// Tooltip Element
var tooltipEl = document.getElementById('chartjs-tooltip');
// Hide if no tooltip
if (tooltip.opacity === 0) {
tooltipEl.style.opacity = 1;
return;
}
if (!tooltipEl) {
tooltipEl = document.createElement('div');
tooltipEl.id = 'chartjs-tooltip';
tooltipEl.innerHTML = '<table></table>';
this._chart.canvas.parentNode.appendChild(tooltipEl);
tooltipEl.style.opacity = 1;
}
function getBody(bodyItem) {
return bodyItem.lines;
}
// Set Text
if (tooltip.body) {
var titleLines = tooltip.title || [];
var bodyLines = tooltip.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 = tooltip.labelColors[i];
var style = 'background:' + colors.backgroundColor;
style += '; border-color:' + colors.borderColor;
style += '; border-width: 2px';
var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
innerHtml += '<tr><td><img src="../images/' + body + '-pelagic.png">' + span +  '</td></tr>';
});
innerHtml += '</tbody>';
var tableRoot = tooltipEl.querySelector('table');
tableRoot.innerHTML = innerHtml;
}
var positionY = this._chart.canvas.offsetTop;
var positionX = this._chart.canvas.offsetLeft;
// Display, position, and set styles for font
tooltipEl.style.opacity = 1;
tooltipEl.style.left = positionX + tooltip.caretX + 'px';
tooltipEl.style.top = positionY + tooltip.caretY + 'px';
tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
};

有什么想法吗？它的工作原理是悬停时显示图像，并且在您将鼠标悬停在甜甜圈的下一个切片上之前，图像不会消失(而不是像通常那样立即消失(。我准备用头撞砖墙！

Answer 1

我遇到了类似的问题 - 我的自定义工具提示确实弹出了，但没有自动消失。我发现工具提示"回调"和"自定义"配置不能一起使用。我不知道这是设计使然还是错误。

在下面的配置中，您必须删除"回调"部分。您松开了标签的格式，因此您的自定义工具提示组件应该更新/更改，以便在那里完成格式设置(。

tooltips: {
enabled: false,
callbacks: {
label: function(tooltipItem, data) { 
var indice = tooltipItem.index;                 
return  data.labels[indice];
}
},
custom: customTooltips
}

Answer 2

哦，伙计，我想迟到了，但其他人可能会发现你的代码很有用，所以我不得不说有一个小而微不足道的错误：

if (tooltip.opacity === 0) {
tooltipEl.style.opacity = 1;
return;
}

您必须将工具提示元素opacity设置为 0！ 🙈