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和@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