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

Question

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

例如:我想更改"1月:28个文件"或"28个文件"之类的工具提示

Answer 1

验证的答案不再有效.对于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">

这个答案是这个问题的副本.

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

之前的精彩答案不适用于 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;
                }}}}}});