Chart.js V2:为工具提示标签添加前缀或后缀

Question

在Chart.js V1.0中,我将添加tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= '€' + value %>"一个欧元符号作为工具提示标签的前缀.但是,这在V2中不再有效.有人知道新方法吗？我似乎找不到它.

非常感谢!

Answer 1

在V2.0中,不推荐使用tooltipTemplate选项.相反,您可以使用回调来修改显示的工具提示.有回调的使用量的样品在这里,你可以找到在可能的回调文档下Chart.defaults.global.tooltips

在你的情况下,我会做以下事情:

window.myLine = new Chart(chart, {
    type: 'line',
    data: lineChartData,
    options: {
            tooltips: {
                enabled: true,
                mode: 'single',
                callbacks: {
                    label: function(tooltipItems, data) { 
                        return tooltipItems.yLabel + ' €';
                    }
                }
            },
     }       
  });

不要忘记设置HTML元标记:

<meta charset="UTF-8">

Answer 2

除了iecs的答案,如果你想返回确切的默认文本并添加更多(如你的情况下的€符号),请使用以下语法:

var ctx = $(chartCanvas);
window.chartObject = new Chart(ctx, {
    type: 'bar',
    data: chartData,
    options: {            
        tooltips: {
            callbacks: {
                label: function(tooltipItems, data) {
                    return data.datasets[tooltipItems.datasetIndex].label +': ' + tooltipItems.yLabel + ' €';
                }
            }

        }
    }
});

Answer 3

看看它是否有帮助:

        var config = {
            options: {
                tooltips: {
                    callbacks: {
                        title: function (tooltipItem, data) { return data.labels[tooltipItem[0].index]; },
                        label: function (tooltipItem, data) {
                            var amount = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                            var total = eval(data.datasets[tooltipItem.datasetIndex].data.join("+"));
                            return amount + ' / ' + total + ' ( ' + parseFloat(amount * 100 / total).toFixed(2) + '% )';
                        },
                        //footer: function(tooltipItem, data) { return 'Total: 100 planos.'; }
                    }
                },
            }
        };

Answer 4

这套“标签+价值+€”

options: {
    legend: {
        display: false
    },
    tooltips: {
        callbacks: {
            label: function(tooltipItem, data) {
                return data.labels[tooltipItem.index] + ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + '€';
            }
        }
    }
}

Answer 5

如果您有一个堆积条形图(我假设一个堆积折线图)并且您想要使用货币符号格式化单个条形图中包含的所有数据点,您可以执行以下操作:

    tooltips: {
        mode: 'label',
        callbacks: {
            label: function (tooltipItems, data) {
                return '$' + tooltipItems.yLabel;
            }
        }
    },

注意值mode.

如果您希望更好地控制工具提示,例如在图表的图例中包含标签,您可以执行以下操作:

    tooltips: {
        mode: 'single',  // this is the Chart.js default, no need to set
        callbacks: {
            label: function (tooltipItems, data) {
                var i, label = [], l = data.datasets.length;
                for (i = 0; i < l; i += 1) {
                    label[i] = data.datasets[i].label + ' : ' + '$' + data.datasets[i].data[tooltipItems.index];
                }
                return label;
            }
        }
    },

Answer 6

只是更新@LucLérot的答案.我有同样的问题,他的代码帮助了我但没有修复它,我不得不修改它为我工作.使用Chart.js版本2.6.0

var ctx = $(chartCanvas);
window.chartObject = new Chart(ctx, {
    type: 'bar',
    data: chartData,
    options: {            
        tooltips: {
               callbacks: {
                   label: function (tooltipItems, data) {
                       return data.datasets[tooltipItems.datasetIndex].label + ': ' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] + ' €';
                   }
              }

        }
    }
});