html - 在 chart.js 的默认工具提示标签中启用 HTML 标签

Question

需要在标签中默认添加HTMLtooltip标签callback function

tooltips: { 
    callbacks: {
        label: function(tooltipItem, data) {
            return "<h1>Daily Ticket Sales</h1> </br> $" + tooltipItem.yLabel;
        },
    }
}

Answer 1

我可以看到您想赋予一些样式或增加“ Daily Ticket Sales ”的字体大小。您可以做的一件事是将标题放在标题回调中，并通过工具提示属性更改标题的样式。
[示例代码]

options: {
            tooltips: {
                titleFontSize : 24,
                callbacks: {
                    title: function(tooltipItems, data) {
                        return 'Daily Ticket Sales';
                    },
                    label: function(tooltipItem, data) {
                        return '$'+tooltipItem.yLabel;
                    }
                }
            }
        }

现在你看到我将标题字体大小设置为 24。这样，它将开始呈现 h1 的外观。以下是您为工具提示标题设置的属性。

titleFontStyle
titleSpacing
titleMarginBottom
titleFontColor
titleAlign