我一直在研究 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选项。有关于如何进行自定义工具提示的文档，如果我无法弄清楚，我将最终使用这些文档，但我们将不胜感激。

最佳答案

自 v2.4 起，不幸的是回调目前不允许 HTML。您需要编写自定义工具提示函数。

示例可以在 chart-js 的示例文件夹中找到(尽管有些比我找到的其他更好)。

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

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

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

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

然后在图表选项中将其设置为自定义工具提示函数:

window.myLine = new Chart(chartEl, {
    type: 'line',
    data: lineChartData,
    options: {
        title:{
            display:true,
            text:'Chart.js Line Chart - Custom Tooltips'
        },
        tooltips: {
            enabled: false,
            mode: 'index',
            position: 'nearest',
            //Set the name of the custom function here
            custom: customTooltips
        }
    }
});

编辑:抱歉，我只读了你问题的标题，没有读完整的问题。通过将交互模式更改为在选项中建立索引，您可以更简单地完成您的要求，并且工具提示中没有 HTML(除非出于其他原因需要它)。有一个示例可用于展示其工作原理。

关于javascript - Chart JS 在工具提示中显示 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39025737/