web-dev-qa-db-fra.com

Sauts de ligne de l'info-bulle Chartjs

Est-il possible d'obtenir des sauts de ligne dans les info-bulles de Chartjs?

tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>"

Je veux remplacer ":" par une nouvelle ligne.

J'ai essayé avec &#013;, \u000D, \n et <br /> en vain.

Mise à jour: J'ai changé ma réponse acceptée maintenant que chart.js est sur la version 2.

javascriptchart.js
23
jcuenod

Si vous utilisez 2.0.0-beta2, vous pouvez utiliser le rappel d'info-bulle et y renvoyer un tableau de chaînes.

tooltips: {
    mode: 'single',
    callbacks: {
        afterBody: function(data) {
            var multistringText = ['first string'];
            // do some stuff
            multistringText.Push('another string');

            return multistringText;
        }
    }
}
58
Alexey Pavlov

À ce stade, il n'est pas possible d'ajouter des sauts de ligne à une info-bulle ou à une étiquette d'axe. En ce moment, les développeurs sont des options d'implémentation de discussion; la discussion peut être trouvée Autoriser l'habillage dans les étiquettes d'axe (problème sur github) .

6
Jarvl

En fait, tous les rappels d'info-bulles prennent en charge plusieurs lignes de texte et vous pouvez utiliser le rappel label comme d'habitude. Il rend l'étiquette de données sous forme de texte d'info-bulle par défaut.

Cité de documentation :

Toutes les fonctions doivent renvoyer une chaîne ou un tableau de chaînes. Les tableaux de chaînes sont traités comme plusieurs lignes de texte.

Exemple de code:

tooltips: {
    callbacks: {
      label: (tooltipItem, data) => {
        if (tooltipItem.index % 2)
          return ['Item 1', 'Item 2', 'Item 3'];
        else
          return 'Single line';
      }
    }
  }
4
Tien Do

Vous pouvez utiliser le rappel du pied de page des info-bulles, il ne rendra pas non plus le carré de couleur pour chaque liste.

tooltips: {
  callbacks: {
    label: function(tooltipItem, data) {
      let label = data.datasets[tooltipItem.datasetIndex].label;
      let value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
      return label + ': ' + value;
    },
    footer: function(tooltipItems, data) {
      return ['new line', 'another line'];
    }
  }
}
4
ghanshyam shah