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

Question

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

例如：我想更改工具提示，例如“January：28 Files”或“28 Files”

Answer 1

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

Chart.defaults.global.tooltipTemplate

已弃用。

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

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

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

此答案是此question的副本。

Answer 2

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

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

这是另一个例子：

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

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

Answer 3

从其他回复中我发现有帮助我，显然标签属性可以设置为功能，例如，格式化货币：

＆＃13;

＆＃13;

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, ",");
  }
}

＆＃13;

＆＃13;

＆＃13;