关于javascript：如何修改chartjs工具提示，以便我可以在工具提示中添加自定义的字符串


How to modify chartjs tooltip so i can add customized strings in tooltips

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

enter image description here

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

相关讨论

经过验证的答案不再起作用。 对于Chart.js V2，

1
Chart.defaults.global.tooltipTemplate

不推荐使用。

相反，您可以使用回调来修改显示的工具提示。 Chart.defaults.global.tooltips下的文档中提供了一个示例，说明了可能的回调的用法。

在您的情况下，我将执行以下操作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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标签：

1
<meta charset="UTF-8">

这个答案是从这个问题中复制过来的。

相关讨论

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

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

这是另一个示例：

1
2
3
4
5
var ctx = document.getElementById("canvas").getContext("2d");

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var overrides = {
  // show lables as currency
  scaleLabel: function(label) {
    return '$' + label.value.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g,",");
  },

  // String - Template string for single tooltips
  tooltipTemplate: function(label) {
    return '$' + label.value.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g,",");
  },

  // String - Template string for multiple tooltips
  multiTooltipTemplate: function(label) {
    return '$' + label.value.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g,",");
  }
}