始终显示ChartJS自定义工具提示 [英] Always display ChartJS custom tooltips

问题描述

在这里和官方文档中关注了几个指南之后，我完全被卡住了。

After following several guides on here and from the official docs, I am absolutely stuck.

我有一些自定义工具提示会在其中显示基于的PNG图形自定义工具提示中的数据名称。

I have some custom tooltips that will display a PNG graphic within it based on the name of the data in the custom tooltip.

我找到了几个隐藏工具提示的解决方案，或者将它们全部设置为始终显示，但它们似乎都不起作用正如我所愿。我希望隐藏标准工具提示，并且我的自定义工具提示始终显示。

I have found several solutions to hide tooltips, or set them all to be always displayed, but none of them seem to work as I would like. I want the standard tooltips hidden, and my custom ones always shown.

我的代码如下：

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

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

任何想法？它可以在悬停时显示图像，并且图像不会消失，直到您将鼠标悬停在圆环的下一个切片上（而不是像通常那样直接消失）。我已经准备好把头撞到一堵砖墙上了！

Any ideas? It works as far as it displays the image on hover, and the image doesn't disappear until you hover over the next slice of the doughnut (rather than disappearing straight away like it usually does). I'm ready to bang my head against a brick wall!

推荐答案

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

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
    }

这篇关于始终显示ChartJS自定义工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！