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

【问题标题】：How to modify chartjs tooltip so i can add customized strings in tooltips如何修改chartjs工具提示，以便我可以在工具提示中添加自定义字符串
【发布时间】：2014-09-08 10:42:18
【问题描述】：

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

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

【问题讨论】：

当您定义全局配置选项时，有一个工具提示配置 HTML 可作为一个选项使用：chartjs.org/docs/#getting-started-global-chart-configuration
@NicholasKyriakides 没有注意到这一点。现在我可以更改模板 tooltipTemplate: ": Files" 谢谢 :)

标签： javascript chart.js

【解决方案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复制而来的。

【讨论】：

这在 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] 并且我有一个字符串列表是 ['notes for item 1', 'notes for item 2', 'notes for item 3', 'notes for item 3', 'notes for item 5'] - 我需要在工具提示上显示字符串。有什么想法吗？

【解决方案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"
});

【讨论】：

此解决方案不适用于 chart.js V2。如果您遇到麻烦，请查看我的回答或link

【解决方案3】：

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

var overrides = {
  // show lables as currency
  scaleLabel: toCurrency,

  // String - Template string for single tooltips
  tooltipTemplate: toCurrency,

  // String - Template string for multiple tooltips
  multiTooltipTemplate: toCurrency
}

function toCurrency(label) {
    return '$' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

【讨论】：

【解决方案4】：

以前的好答案不适用于chartjs 3。这个例子来自the official documentation：

const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
    plugins: {
        tooltip: {
            callbacks: {
                label: function(context) {
                    const label = context.dataset.label || '';

                    if (label) {
                        label += ': ';
                    }
                    if (context.parsed.y !== null) {
                        label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);
                    }
                    return label;
                }}}}}});

【讨论】：