图表 JS 在工具提示中显示 HTML

2022-01-22 00:00:00 javascript chart.js

我一直在研究 Chart JS 的文档，试图弄清楚当您将鼠标悬停在特定点上时如何修改折线图工具提示的内容.

I've been fighting with Chart JS's documentation trying to figure out how to modify the content of a line chart's tool tip when you hover over a specific point.

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

Basically, I want to display the values on all the same vertical axis whenever a single point is hovered over. I've tried something like this:

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，工具提示字面上显示字符串:

This works to the degree of looping over each data set and appending <label>Example: 0%<br/></label> for each dataset, but when I return that HTML, the tooltip literally displays the string:

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

而不是呈现正确的 HTML:

Instead of rendering the correct HTML:

Example1: 1%
Example2: 5%
...

现在，我知道 Chart JS 版本 1.0 具有 tooltipTemplate 选项，但我似乎无法弄清楚是否有任何方法可以在 tooltips.callbacks 中返回 HTML.标签 选项.有关于如何做自定义工具提示的文档，如果我无法弄清楚，我最终会使用它，但任何帮助将不胜感激.

Now, I know that Chart JS version 1.0 has the tooltipTemplate option, but I can't seem to figure out if there is any way to return HTML in the tooltips.callbacks.label option. There's documentation for how to do custom tooltips, which I will end up using if I can't figure this out, but any help would be appreciated.

推荐答案

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

As of v2.4, the callbacks unfortunately don't allow for HTML currently. You'll need to write a custom tooltip function.

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

Examples can be found in the samples folder for chart-js (although some are better than others I found).

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

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

Try running the samples to get a feel for how the options and modifications affect the tooltip function.

以自定义函数的折线图示例为例:

For example in the line chart example of a custom function:

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

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

Then set this as the custom tooltip function in the options for the chart:

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(除非出于其他原因需要).有一个示例可以展示它是如何工作的.

Apologies, I only read the title of your question, not the full question. What you ask can be done more simply and without HTML in the tooltips (unless it's required for another reason) by changing the interaction mode to index in the options. There's a sample available to show how this works.

相关文章