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

Question

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

例如：我想要更改工具提示，比如“1月：28个文件”或者只有“28个文件”。

- Sudharshan

---

当您定义全局配置选项时，可以使用工具提示配置HTML作为选项：http://www.chartjs.org/docs/#getting-started-global-chart-configuration - nicholaswmin

@NicholasKyriakides 没有注意到这一点。现在我可以更改模板 tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %> Files"。谢谢 :) - Sudharshan

Answer 1

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

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

- Sudharshan

---

这个解决方案不适用于chart.js的V2版本。如果你遇到麻烦，请查看我的答案或者访问这个链接：https://dev59.com/2lsW5IYBdhLWcg3wqYt7 - anon

Answer 2

伟大的之前的答案不能用于chartjs 3。以下示例来自官方文档：

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

- mm_

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

- John Bonfardeci