javascript - 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

在工具提示中使用 Font Awesome 图标

只需设置tooltipFontFamily

请注意，您实际上并未将 HTML 放入 Canvas 工具提示中。您只是将整个工具提示的字体设置为 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;
}

---

fiddle - https://jsfiddle.net/akypsz26/