Chartjs - 带卢比符号的工具提示

Question

我正在为我的图表使用工具提示： -

var opt = {
                  ....
                  animation: true,
                  animationSteps: 100,                   
                  tooltipTemplate: function (tooltip) {
                       return numConversion(tooltip.value);
                  }
           }

function numConversion(val) {
    if (val >= 10000000) val = (val / 10000000).toFixed(2) + ' Cr';
    else if (val >= 100000) val = (val / 100000).toFixed(2) + ' Lac';
    else if (val >= 1000) val = (val / 1000).toFixed(2) + ' K';
    return val;

}

我想要一个卢比符号来添加文本。当我在工具提示中使用一些html标签时，标签会按原样显示。

return "<i class='fa fa-inr'></i>" + numConversion(tooltip.value);

上面的行以文本格式显示标签。如何在工具提示中显示实际标签？

Answer 1

在工具提示中使用字体真棒图标

只需设置tooltipFontFamily

即可

请注意，您实际上并未在画布工具提示中放置HTML。您只需将整个工具提示的字体设置为FontAwesome。副作用是你的数字也将是FontAwesome字体 - 这通常是好的。如果这不行，那么自定义工具提示就是可行的方法（正如@ J-D和@Lalji Tadhani已经注意到的那样）

您还需要等待加载字体文件（我相信即使您使用自定义工具提示也会出现此问题）

预览

<强>脚本

...
var myNewChart = new Chart(ctx).Line(lineData, {
    tooltipFontFamily: "'FontAwesome'",
    tooltipTemplate: function (tooltip) {
        return "\uf156 " + numConversion(tooltip.value);
    }
});
...

<强> CSS

注意来源的占位符

@font-face {
    font-family: 'FontAwesome';
    src: /* path to your font files */
    font-weight: normal;
    font-style: normal;
}

小提琴 - https://jsfiddle.net/akypsz26/

Answer 2

将属性data-html="true"添加到您的链接

HTML-tags in tooltip