Chart.js V2: Aggiungi prefisso o suffisso all'etichetta tooltip

Question

In Chart.js V1.0, aggiungerei tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= '€' + value %>" per aggiungere un simbolo dell'euro come prefisso all'etichetta del suggerimento. Tuttavia, questo non funziona più in V2. Qualcuno conosce il nuovo modo di farlo? Non riesco a trovarlo.

Grazie mille!

Answer 1

Nella V2.0 l'opzione tooltipTemplate è deprecata. Invece puoi usare i callback per modificare i tooltip visualizzati. C'è un campione per l'utilizzo di callback here e si possono trovare le possibili callback nelle documentation sotto Chart.defaults.global.tooltips

Nel tuo caso vorrei fare quanto segue:

window.myLine = new Chart(chart, { 
    type: 'line', 
    data: lineChartData, 
    options: { 
      tooltips: { 
       enabled: true, 
       mode: 'single', 
       callbacks: { 
        label: function(tooltipItems, data) { 
         return tooltipItems.yLabel + ' €'; 
        } 
       } 
      }, 
    }  
    }); 

non dimenticare di impostare il codice HTML meta tag:

<meta charset="UTF-8"> 

aggiornato collegamento Documtation al 28 settembre 2017: Tooltip Callbacks

Answer 2

Oltre alla risposta IECS', se si vuole restituire il esatto testo predefinito e aggiungere un po 'di più (come un € segno nel tuo caso), l'uso seguente sintassi:

var ctx = $(chartCanvas); 
window.chartObject = new Chart(ctx, { 
    type: 'bar', 
    data: chartData, 
    options: {    
     tooltips: { 
      callbacks: { 
       label: function(tooltipItems, data) { 
        return data.datasets[tooltipItems.datasetIndex].label +': ' + tooltipItems.yLabel + ' €'; 
       } 
      } 

     } 
    } 
}); 

Answer 3

vedere se aiuta :

 var config = { 
      options: { 
       tooltips: { 
        callbacks: { 
         title: function (tooltipItem, data) { return data.labels[tooltipItem[0].index]; }, 
         label: function (tooltipItem, data) { 
          var amount = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]; 
          var total = eval(data.datasets[tooltipItem.datasetIndex].data.join("+")); 
          return amount + '/' + total + ' (' + parseFloat(amount * 100/total).toFixed(2) + '%)'; 
         }, 
         //footer: function(tooltipItem, data) { return 'Total: 100 planos.'; } 
        } 
       }, 
      } 
     }; 

Answer 4

Se si dispone di un barre in pila grafico (e presumo un grafico a linee in pila) e si desidera formattare tutti i punti di dati inclusi in un unico bar con un simbolo di valuta, si può fare qualcosa di simile questo:

tooltips: { 
     mode: 'label', 
     callbacks: { 
      label: function (tooltipItems, data) { 
       return '$' + tooltipItems.yLabel; 
      } 
     } 
    }, 

Prendere nota del valore di mode.

Se si vuole avere un controllo più preciso della punta dell'utensile, ad esempio, comprendono le etichette come appaiono leggenda del grafico, si può fare qualcosa di simile:

tooltips: { 
     mode: 'single', // this is the Chart.js default, no need to set 
     callbacks: { 
      label: function (tooltipItems, data) { 
       var i, label = [], l = data.datasets.length; 
       for (i = 0; i < l; i += 1) { 
        label[i] = data.datasets[i].label + ' : ' + '$' + data.datasets[i].data[tooltipItems.index]; 
       } 
       return label; 
      } 
     } 
    }, 

Answer 5

Basta aggiornare la risposta di @Luc Lerot. Ho avuto lo stesso problema e il suo codice mi ha aiutato ma non risolto, ho dovuto modificarlo per funzionare per me. Utilizzando Chart.js versione 2.6.0

var ctx = $(chartCanvas); 
window.chartObject = new Chart(ctx, { 
    type: 'bar', 
    data: chartData, 
    options: {    
     tooltips: { 
       callbacks: { 
        label: function (tooltipItems, data) { 
         return data.datasets[tooltipItems.datasetIndex].label + ': ' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] + ' €'; 
        } 
       } 

     } 
    } 
});