javascript - Chart JS在工具提示中显示HTML

我一直在与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(除非出于其他原因而需要使用HTML)，从而更轻松地完成您所要的内容。有一个示例可以显示其工作原理。