web-dev-qa-db-fra.com

Comment personnaliser l'info-bulle d'un graphique Donut Chart.js 2.0?

J'essaie de montrer certaines données en utilisant un graphique en anneau de Chart.js2.

Mon graphique actuel ressemble à ceci:

 current chart

La sortie souhaitée doit afficher un autre attribut, le pourcentage, qui ressemble à ceci:

 desired chart with percentage

J'ai lu la documentation, mais je ne peux pas y faire face car c'est très général et je suis nouveau en JavaScript.

Mon code pour le premier graphique est le suivant:

const renderCashCurrencyPie = (cashAnalysisBalances) => {
  if (cashAnalysisBalances) {
    const currenciesName = cashAnalysisBalances
    .map(curName => curName.currency);

    const availableCash = cashAnalysisBalances
    .map(avCash => avCash.availableCash);

    let currenciesCounter = 0;
    for (let i = 0; i < currenciesName.length; i += 1) {
      if (currenciesName[i] !== currenciesName[i + 1]) {
        currenciesCounter += 1;
      }
    }

    const currenciesData = {
      labels: currenciesName,
      datasets: [{
        data: availableCash,
        backgroundColor: [
          '#129CFF',
          '#0C6DB3',
          '#FF6384',
          '#00FFFF'
        ],
        hoverBackgroundColor: [
          '#FF6384',
          '#36A2EB',
          '#FFCE56',
          '#00FFFF'
        ]
      }]
    };
javascripttooltipcustomizationchart.js2
15
user7334203

Vous pouvez personnaliser les info-bulles à l'aide de la section de configuration des info-bulles des options du graphique, comme expliqué ici: http://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-configuration

Comme indiqué dans l'exemple de code ci-dessous, vous pouvez modifier des éléments tels que la couleur, la taille et les styles. Consultez la documentation liée ci-dessus pour une liste complète des options configurables. 

Si vous souhaitez ajouter le pourcentage à l'affichage de l'info-bulle, vous pouvez utiliser callbacks d'infobulle . La documentation contient une liste de tous les champs de rappel personnalisables possibles.

Dans l'exemple ci-dessous, j'ai défini le "titre" pour afficher le nom de l'étiquette, "étiquette" pour afficher la valeur et ajouter le pourcentage à "afterLabel".

var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: data,
  options: {
    tooltips: {
      callbacks: {
        title: function(tooltipItem, data) {
          return data['labels'][tooltipItem[0]['index']];
        },
        label: function(tooltipItem, data) {
          return data['datasets'][0]['data'][tooltipItem['index']];
        },
        afterLabel: function(tooltipItem, data) {
          var dataset = data['datasets'][0];
          var percent = Math.round((dataset['data'][tooltipItem['index']] / dataset["_meta"][0]['total']) * 100)
          return '(' + percent + '%)';
        }
      },
      backgroundColor: '#FFF',
      titleFontSize: 16,
      titleFontColor: '#0066ff',
      bodyFontColor: '#000',
      bodyFontSize: 14,
      displayColors: false
    }
  }
});

JSFiddle de travail: https://jsfiddle.net/m7s43hrs/

42
Tot Zam

Selon la réponse de @Tot Zam, mais en utilisant les fonctions de flèche par souci de brièveté:

options: {
  tooltips: {
    callbacks: {
      title: (items, data) => data.datasets[items[0].datasetIndex].data[items[0].index].myProperty1,
      label: (item, data) => data.datasets[item.datasetIndex].data[item.index].myProperty2
    }
  }
}
1
Merenzo