web-dev-qa-db-fra.com

Chart.js V2: Ajouter un préfixe ou un suffixe à l'étiquette de l'info-bulle

Dans Chart.js V1.0, j’ajouterais tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= '€' + value %>" pour ajouter un symbole de l’euro comme préfixe au libellé de l’info-bulle. Cependant, cela ne fonctionne plus dans la V2. Est-ce que quelqu'un sait la nouvelle façon de faire cela? Je n'arrive pas à le trouver.

Merci beaucoup!

chart.js
39
Algorithm_NL

Dans la version 2.0, l’outil tooltipTemplate est obsolète. À la place, vous pouvez utiliser des rappels pour modifier les info-bulles affichées. Il existe un exemple d'utilisation des callbacks ici et vous pouvez trouver les callbacks possibles dans le documentation sous Chart.defaults.global. info-bulles

Dans votre cas, je ferais ce qui suit:

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

N'oubliez pas de définir la balise méta HTML:

<meta charset="UTF-8">
96
bencekd

En plus de la réponse de iecs, si vous souhaitez renvoyer le texte exact par défaut et en ajouter un autre (comme un signe € dans votre cas), utilisez la syntaxe suivante:

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 + ' €';
                }
            }

        }
    }
});
40
Luc Lérot

Voyez si cela aide:

        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.'; }
                    }
                },
            }
        };
16
Ricardo Zambon

Si vous avez un graphique barre empilée (et je suppose un graphique à lignes empilées) et que vous souhaitez formater tous les points de données inclus dans une seule barre avec un symbole monétaire, vous pouvez procéder de la manière suivante:

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

Notez la valeur de mode.

Si vous souhaitez contrôler plus précisément l'info-bulle, par exemple inclure les étiquettes telles qu'elles apparaissent dans la légende du graphique, vous pouvez procéder de la manière suivante:

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

Je viens de mettre à jour la réponse de @Luc Lérot. J'ai eu le même problème et son code m'a aidé mais pas résolu, je devais le modifier pour travailler pour moi. À l'aide de Chart.js version 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] + ' €';
                   }
              }

        }
    }
});
6
Igor Lima II

Cet ensemble "label + valeur + €"

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