Chartjs-带有卢比符号的工具提示 [英] Chartjs - Tooltip with Rupee Symbol

问题描述

我正在为图表使用工具提示，例如:-

I am using tooltip for my chart like this :-

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标记时，标记按原样显示.

I want a Rupee symbol to prepend the text. When i use some html tag to the tooltip, the tag is displayed as it is.

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

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

The above line displays the tag as it is in text format. How to display the actual tags in the tooltip?

推荐答案

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

只需设置tooltipFontFamily

请注意，您实际上并没有将HTML放入画布工具提示中.您只是将整个工具提示的字体设置为FontAwesome.副作用是您的数字也将使用FontAwesome字体-通常是可以的.如果这样做不可行，那么就可以使用自定义工具提示(如@ J-D和@Lalji Tadhani已经指出的那样)

Note that you are not actually putting HTML in the canvas tooltip. You are just setting the font for the entire tooltip to FontAwesome. The side effect is that your numbers will also be in the FontAwesome font - which is usually ok. If this is not OK, custom tooltips would be the way to go (as @J-D and @Lalji Tadhani already noted)

您还需要稍等片刻才能加载字体文件(即使您自定义工具提示，我相信您也会遇到这个问题)

You'll also have to wait a bit for the font files to load (I believe you'll have this problem even if you do custom tooltips)

预览

脚本

...
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/

这篇关于Chartjs-带有卢比符号的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！