3

在此处和官方文档中遵循了几个指南之后，我完全被卡住了。

我有一些自定义工具提示，它们将根据自定义工具提示中的数据名称在其中显示 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;
}

Javascript

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

有任何想法吗？它的工作原理是在悬停时显示图像，并且图像不会消失，直到您将鼠标悬停在甜甜圈的下一个切片上（而不是像通常那样立即消失）。我已经准备好用头撞砖墙了！

4

2 回答 2

0

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

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

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

于 2019-10-25T07:00:44.050 回答
0

I'm facing similar problem - my custom tooltip did pop up, but didn't go away automatically. I found out the tooltips 'callbacks' and 'custom' config cannot be used together. I don't know if this is by design or a bug.

In below config, you will have to remove 'callbacks' section. You loose the formatting of the label, so your custom tooltip component should then be updated/altered so the formatting is done there).

 tooltips: {
        enabled: false,
        callbacks: {
            label: function(tooltipItem, data) { 
                var indice = tooltipItem.index;                 
                return  data.labels[indice];
            }
        },
        custom: customTooltips
    }
于 2018-12-17T10:48:33.207 回答