Chart.js V2: добавить префикс или суффикс к ярлыку всплывающей подсказки

Ответ 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">

Обновленная ссылка на Documtation от 28 сентября 2017 года: Обратные вызовы подсказок

Ответ 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 + ' €';
                }
            }

        }
    }
});

Ответ 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.'; }
                    }
                },
            }
        };

Ответ 4

Если у вас есть диаграмма сложенная строка (и я предполагаю, что это сложная линейная диаграмма), и вы хотите отформатировать все точки данных, включенные в одну строку с символом валюты, вы можете сделать что-то вроде это:

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

Ответ 5

Просто обновить ответ @Luc Lé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] + ' €';
                   }
              }

        }
    }
});