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

时间:2017-01-09 10:18:17

标签: html angularjs tooltip chart.js angular-chartist.js

需要在标签tooltip

中的默认callback function中添加HTML标记
tooltips: { 
    callbacks: {
        label: function(tooltipItem, data) {
            return "<h1>Daily Ticket Sales</h1> </br> $" + tooltipItem.yLabel;
        },
    }
}

1 个答案:

答案 0 :(得分:0)

我可以看到您想要提供某种风格或增加&#39; 每日售票的字体大小。您可以做的一件事是将标题放在标题回调中,并通过工具提示属性更改标题的样式。
[<强>采样代码

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