Javascript 如何修改chartjs工具提示，以便在工具提示中添加自定义字符串

如何编辑chartjs工具提示以在工具提示中添加自定义字符串

---

例如：我想更改工具提示，如“一月：28个文件”或“28个文件”

重新定义默认全局工具提示模板，如下所示：

Chart.defaults.global.tooltipTemplate =
  "<%if (label){%><%=label%>: <%}%><%= value %>";

Chart.defaults.global.tooltipTemplate=
": ";

下面是另一个例子：

var ctx = document.getElementById("canvas").getContext("2d");

var myBarChart = new Chart(ctx).Bar(data, {
        tooltipTemplate: "<%= value %> Files"
});

var ctx=document.getElementById（“canvas”）.getContext（“2d”）；
var myBarChart=新图表（ctx）.Bar（数据{
ToolTiptTemplate：“文件”
});

从我发现的对我有帮助的其他响应中提取，显然标签属性可以设置为函数，例如，设置货币格式：

var覆盖={
//将标签显示为货币
scaleLabel:toCurrency，
//字符串-单个工具提示的模板字符串
工具脚本模板：toCurrency，
//字符串-多个工具提示的模板字符串
多工具模板：toCurrency
}
函数到电流（标签）{
返回“$”+label.value.toString（）.replace（/\B（？=（\d{3}）+（？！\d））/g，“，”；
}

验证答案不再有效。对于Chart.js V2

Chart.defaults.global.tooltipTemplate

不推荐使用

相反，您可以使用回调来修改显示的工具提示。在Chart.defaults.global.tooltips下有一个可能回调的用法示例

在你的情况下，我会做以下工作：

window.myLine = new Chart(chart, {
    type: 'bar',
    data: barChartData,
    options: {
            tooltips: {
                enabled: true,
                mode: 'single',
                callbacks: {
                    label: function(tooltipItems, data) { 
                        return tooltipItems.yLabel + ' : ' + tooltipItems.xLabel + " Files";
                    }
                }
            },
     }       
  });

不要忘记设置HTML元标记：

<meta charset="UTF-8">

---

这个答案是从这里复制的。

在定义全局配置选项时，有一个工具提示配置HTML可用作选项：@NicholasKyriakides没有注意到这一点。现在我可以更改模板TooliptTemplate:：Files“谢谢：）此解决方案不适用于chart.js的V2。如果您遇到麻烦，请查看我的答案，或者在Chart.js v2.7.1中，这对我没有任何帮助。我刚刚尝试了版本2.7.1，它对我有效。您可能使用了错误的方法。我的回调中未定义yLabel和xLabel。所以我把它改为data.labels[tooltipItems.index]+“：CHF”+this.decimalPipe.transform（data.datasets[0].data[tooltipItems.index]，“1.2-2”），我让这个版本正常工作。如果我有一个字符串列表，每个字符串对应于要显示的数据点，我如何在数据集上显示它？例如数据集的值为[1,2,3,4,5]，我有一个字符串列表[‘项目1注释’、‘项目2注释’、‘项目3注释’、‘项目3注释’、‘项目5注释’]-我需要在工具提示上显示字符串。有什么想法吗？