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

Question

J'essaie d'afficher des données en utilisant un graphique en anneau de Chart.js2.

Mon tableau actuel ressemble à ceci:

Ma sortie désirée doit montrer un autre attribut, qui est le pourcentage, et ressemble à ceci:

J'ai lu la documentation, mais je ne peux pas m'en occuper parce que c'est très général et que je suis novice en JavaScript.

Mon code pour le premier tableau 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' 
     ] 
     }] 
    }; 

Answer 1

Vous pouvez personnaliser les info-bulles en utilisant la section de configuration des options graphiques de infobulle, comme expliqué ici: http://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-configuration

Comme le montre l'exemple de code ci-dessous , vous pouvez changer des choses comme la couleur, la taille et les styles. Consultez la documentation 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 tooltip callbacks. 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, "label" pour afficher la valeur, et ajouté 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 
    } 
    } 
}); 

travail jsFiddle: https://jsfiddle.net/m7s43hrs/

Answer 2

Selon la réponse de @Tot Zam, mais en utilisant des fonctions de direction 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 
    } 
    } 
}