Question

我一直在与Chart JS的文档作斗争，试图找出当您将鼠标悬停在特定点上时如何修改折线图的工具提示内容。

基本上，只要单个点悬停在上面，我想在所有相同的垂直轴上显示值。我尝试过这样的事情：

tooltips: {
    callbacks: {
        label: function(tooltipItem, data){
            console.log(data);
            var html = "";
            for(var dataset in data.datasets){
                html += "<label>" + data.datasets[dataset].label + ": " + data.datasets[dataset].data[tooltipItem.index] + "%</label><br/>";
            }
            return html;
        }
    },
},

这适用于每个数据集的循环程度，并为每个数据集附加<label>Example: 0%<br/></label>，但当我返回该HTML时，工具提示会逐字显示字符串：

<label>Example1: 1%</label><br/><label>Example2: 5%</label><br/> ...

而不是呈现正确的HTML：

Example1: 1%
Example2: 5%
...

现在，我知道Chart JS 1.0版具有tooltipTemplate选项，但我似乎无法确定是否有任何方法可以在tooltips.callbacks.label选项中返回HTML。有关于如何进行自定义工具提示的文档，如果我无法解决这个问题，我将最终使用它，但任何帮助都将不胜感激。

Answer 1

从v2.4开始，遗憾的是，回调目前还不允许HTML。您需要编写自定义工具提示功能。

示例可以在chart-js的samples文件夹中找到（虽然有些比我发现的更好）。

https://github.com/chartjs/Chart.js/tree/v2.4.0/samples/tooltips

尝试运行示例以了解选项和修改如何影响工具提示功能。

例如，在自定义函数的折线图示例中：

NODE_PATH=. node -r myscript.js

然后将其设置为图表选项中的自定义工具提示功能：

Chart.defaults.global.pointHitDetectionRadius = 1;
var customTooltips = function(tooltip) {
    // Tooltip Element
    var tooltipEl = document.getElementById('chartjs-tooltip');
    if (!tooltipEl) {
        tooltipEl = document.createElement('div');
        tooltipEl.id = 'chartjs-tooltip';
        tooltipEl.innerHTML = "<table></table>"
        document.body.appendChild(tooltipEl);
    }
    // Hide if no tooltip
    if (tooltip.opacity === 0) {
        tooltipEl.style.opacity = 0;
        return;
    }
    // Set caret Position
    tooltipEl.classList.remove('above', 'below', 'no-transform');
    if (tooltip.yAlign) {
        tooltipEl.classList.add(tooltip.yAlign);
    } else {
        tooltipEl.classList.add('no-transform');
    }
    function getBody(bodyItem) {
        return bodyItem.lines;
    }
    // Set Text
    if (tooltip.body) {
        var titleLines = tooltip.title || [];
        var bodyLines = tooltip.body.map(getBody);
        //PUT CUSTOM HTML TOOLTIP CONTENT HERE (innerHTML)
        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>' + span + body + '</td></tr>';
        });
        innerHtml += '</tbody>';
        var tableRoot = tooltipEl.querySelector('table');
        tableRoot.innerHTML = innerHtml;
    }
    var position = this._chart.canvas.getBoundingClientRect();
    // Display, position, and set styles for font
    tooltipEl.style.opacity = 1;
    tooltipEl.style.left = position.left + tooltip.caretX + 'px';
    tooltipEl.style.top = position.top + tooltip.caretY + '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';
};

编辑：道歉，我只阅读你问题的标题，而不是完整的问题。通过将交互模式更改为选项中的索引，您可以更简单地在工具提示中使用HTML（除非出于其他原因需要使用HTML）。有一个示例可用于展示其工作原理。

Chart JS在工具提示中显示HTML

1 个答案: