web-dev-qa-db-fra.com

JavaScript Chart.js - Formatage de données personnalisé à afficher dans une info-bulle

J'ai examiné divers documents et questions similaires ici, mais je n'arrive pas à trouver la solution particulière. Toutes mes excuses si j'ai oublié quelque chose d'évident ou si j'ai répété cette question!

En guise d’information d’arrière-plan, j’ai implémenté 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 cela fonctionne correctement et tout va bien.

Mon problème est que je dois afficher les données dans les info-bulles sous forme de données formatées. sous forme numérique avec%. Par exemple, l'une de mes données de la base de données est -0.17222. Je l'ai formaté en pourcentage à afficher dans mon tableau et tout va bien. Cependant, lors de la définition des données pour le graphique à barres chart.js, les données manquent manifestement à ce formatage et à l'affichage sous la forme -0.17222, ce que je ne souhaite pas.

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

Je récupère les données de la base de données, puis les place dans ma table:

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

Ensuite, je nourris ces données comme dans la section graphique:

data: kpiRex.getDataAtRow(3)

Toute aide est la bienvenue! Cela fait des heures que je suis coincé là-dessus et c'est probablement quelque chose de très simple que je néglige.

javascriptstring-formattingnumber-formattingcode-formattingchart.js
45
Laura Thomas

Vous souhaitez spécifier un modèle d'info-bulle personnalisé dans vos options de 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 a jsfiddle pour illustrer cela .

Notez que tooltipTemplate s'applique si vous ne possédez qu'un seul jeu de données, multiTooltipTemplate s'applique si vous avez plusieurs jeux de données.

Ces options sont mentionnées dans le section relative à la configuration du graphique global de la documentation . Jetez un coup d'oeil, il vaut la peine de vérifier toutes les autres options qui peuvent être personnalisées ici.

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

34
rtome

Pour chart.js 2.0+, cela a changé (plus tooltipTemplate/multiTooltipTemplate). Pour ceux qui veulent juste 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 que vous pouvez renvoyer les modifications à tooltipItem.yLabel, qui contient la valeur de l’axe des y. Dans mon cas, je voulais ajouter un signe dollar, un arrondi et des milliers de virgules pour un graphique financier. J'ai donc 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;
                });
            }
        }
    }
}
96
Kyrth

Dans chart.js 2.1.6, j'ai fait quelque chose comme ceci (dans TypeScript):

  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+"€";
        }
      }
    }
  }
34
Patrice

Vous pouvez donner à tooltipTemplate une fonction et la formater à votre guise:

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

Les arguments 'v' donnés contiennent beaucoup d'informations en plus de la propriété 'value'. Vous pouvez mettre un "débogueur" dans cette fonction et les inspecter vous-même.

11
Ariel Cabib
tooltips: {
          callbacks: {
            label: (tooltipItem, data) => {
              // data for manipulation
              return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
            },
          },
        },
5
Admir

Dans Chart.Js 2.8.0, la configuration des info-bulles personnalisées se trouve ici: https://www.chartjs.org/docs/latest/configuration/tooltip.html#label-callback (Merci à @ prokaktus )

Si vous voulez par exemple affiche certaines valeurs avec un préfixe ou un suffixe (dans l'exemple, le script ajoute une unité de kWh aux valeurs du graphique), vous pouvez procéder comme suit:

options: {
  rotation: 1 * Math.PI,
  circumference: 1 * Math.PI,
  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        console.log(data);
        console.log(tooltipItem);

        var label = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] || '';

        if (label) {
          label += ' kWh';
        }

        return label;
      }
    }
  }
}

Un exemple de violon est ici aussi: https://jsfiddle.net/y3petw58/1/

1
FranzHuber23
tooltips: {
            enabled: true,
                  mode: 'single',
                  callbacks: {
                    label: function(tooltipItems, data) { 
                      return data.datasets[tooltipItems.datasetIndex].label+": "+tooltipItems.yLabel;
                    }
                  }
                }
0
Nhan Nguyen Truong

Vous devez utiliser Label Callback . Exemple courant pour arrondir les valeurs de données, l'exemple suivant arrondit les données à deux décimales.

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var label = data.datasets[tooltipItem.datasetIndex].label || '';

                    if (label) {
                        label += ': ';
                    }
                    label += Math.round(tooltipItem.yLabel * 100) / 100;
                    return label;
                }
            }
        }
    }
});

Laissez-moi maintenant écrire le scénario dans lequel j'ai utilisé la fonctionnalité de rappel d'étiquette.

Commençons par consigner les arguments de la fonction Label Callback. Vous verrez une structure similaire à celle-ci. Les tableaux sont composés de différentes lignes que vous souhaitez tracer dans le graphique. Dans mon cas, c'est 4, c'est pourquoi la longueur du tableau d'ensembles de données est 4.

enter image description here

Dans mon cas, je devais effectuer des calculs sur chaque jeu de données et identifier la bonne ligne chaque fois que je survolais une ligne dans un graphique.

Pour différencier les différentes lignes et manipuler les données des info-bulles survolées en fonction des données des autres lignes, je devais écrire cette logique.

  callbacks: {
    label: function (tooltipItem, data) {
      console.log('data', data);
      console.log('tooltipItem', tooltipItem);
      let updatedToolTip: number;
      if (tooltipItem.datasetIndex == 0) {
        updatedToolTip = tooltipItem.yLabel;
      }
      if (tooltipItem.datasetIndex == 1) {
        updatedToolTip = tooltipItem.yLabel - data.datasets[0].data[tooltipItem.index];
      }
      if (tooltipItem.datasetIndex == 2) {
        updatedToolTip = tooltipItem.yLabel - data.datasets[1].data[tooltipItem.index];
      }
      if (tooltipItem.datasetIndex == 3) {
        updatedToolTip = tooltipItem.yLabel - data.datasets[2].data[tooltipItem.index]
      }
      return updatedToolTip;
    }
  }

Le scénario mentionné ci-dessus vous sera utile lorsque vous devrez tracer différentes lignes d'un graphique à courbes et manipuler l'info-bulle du point survolé d'une ligne, en fonction des données d'un autre point appartenant à une autre ligne du graphique au même index.

0
Divyanshu Rawat