JavaScript Chart.js – Formatage de données personnalisé à afficher sur la info-bulle

J'ai examiné plusieurs documents et des questions similaires ici, mais je ne trouve pas la solution particulière. Excusez-moi si j'ai manqué quelque chose d'évident ou j'ai répété cette question!

Comme un peu d'informations de fond, j'ai mis en place 4 graphiques à l'aide du plugin Chart.js et transmis les données requises à l'aide de PHP à partir d'une base de données. Tout fonctionne correctement et ça va.

Mon problème est-il que je dois afficher les données dans les info-bulles en tant que données formatées aka. Comme numérique avec%. À titre d'exemple, l'une de mes données de la base de données est -0.17222. Je l'ai formaté en pourcentage pour l'afficher dans ma table et tout va bien. Cependant, lors de la configuration des données pour le graphique à barres chart.js, les données manquent évidemment de cette mise en forme et de l'affichage comme le -0.17222 que je ne veux pas.

Désolé, je voulais poster une photo, mais ma réputation est trop grave!

Je saisis les données de la base de données, puis je me place dans ma table:

var kpiRex = new Handsontable(example1, { data: getRexData(),

Ensuite, j'envoie ces données dans la section graphique:

 data: kpiRex.getDataAtRow(3)

Toute aide est la bienvenue! J'ai été coincé sur cela pendant des heures et c'est probablement quelque chose de vraiment simple que je néglige.

Vous souhaitez spécifier un modèle d'info-bulle personnalisé dans les options de votre graphique, comme ceci:

  // String - Template string for single tooltips tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= value + ' %' %>", // String - Template string for multiple tooltips multiTooltipTemplate: "<%= value + ' %' %>",

De cette façon, vous pouvez ajouter un signe '%' après vos valeurs si c'est ce que vous voulez.

Voici un jsfiddle pour illustrer cela .

Notez que tooltipTemplate s'applique si vous ne disposez que d'un ensemble de données, multiTooltipTemplate s'applique si vous avez plusieurs jeux de données.

Ces options sont mentionnées dans la section de configuration globale du graphique de la documentation . Regardez, il vaut la peine de vérifier toutes les autres options qui peuvent être personnalisées ici.

Notez que vos ensembles de données ne doivent contenir que des valeurs numériques. (Pas de signes% ou autres choses là-bas).

Pour chart.js 2.0+, cela a changé (pas plus de tooltipTemplate / multiTooltipTemplate). Pour ceux qui veulent simplement accéder à la valeur actuelle, non formatée et commencer à la modifier, l'info-bulle par défaut est la même que:

 options: { tooltips: { callbacks: { label: function(tooltipItem, data) { return tooltipItem.yLabel; } } } }

C'est-à-dire, vous pouvez renvoyer des modifications à tooltipItem.yLabel , qui contient la valeur de l'axe y. Dans mon cas, je voulais ajouter un signe dollar, un arrondissement et des milliers de virgules pour un tableau financier, alors j'ai utilisé:

 options: { tooltips: { callbacks: { label: function(tooltipItem, data) { return "$" + Number(tooltipItem.yLabel).toFixed(0).replace(/./g, function(c, i, a) { return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "," + c : c; }); } } } }

Dans chart.js 2.1.6, j'ai fait quelque chose comme ça (en dactylographie):

  let that = this; options = { legend: { display: false, responsive: false }, tooltips: { callbacks: { label: function(tooltipItem, data) { let account: Account = that.accounts[tooltipItem.index]; return account.accountNumber+":"+account.balance+"€"; } } } }

Vous pouvez donner à tooltipTemplate une fonction et formater la info-bulle comme vous le souhaitez:

 tooltipTemplate: function(v) {return someFunction(v.value);} multiTooltipTemplate: function(v) {return someOtherFunction(v.value);}

Les arguments 'v' donnés contiennent beaucoup d'informations en dehors de la propriété 'valeur'. Vous pouvez placer un «débogueur» dans cette fonction et inspecter ceux-là même.