Wie chartjs ändern Tooltip so i individuelle Strings in Tooltips

Question

hinzufügen Wie bearbeite ich chartjs individuelle Strings in Tooltips

Für Beispiel hinzufügen Tooltip: Ich möchte den Tooltip ändern, wie „Januar: 28 Files“oder nur "28 Files"

Answer 1

neu definieren globale Standard Tooltip Vorlage wie folgt:

Chart.defaults.global.tooltipTemplate = 
    "<%if (label){%><%=label%>: <%}%><%= value %>"; 

Hier ist ein weiteres Beispiel dafür ist:

var ctx = document.getElementById("canvas").getContext("2d"); 

var myBarChart = new Chart(ctx).Bar(data, { 
     tooltipTemplate: "<%= value %> Files" 
}); 

Answer 2

aus anderen Antworten Zeichnung, die ich gefunden habe, die mir geholfen, anscheinend die Label-Eigenschaften können Funktionen eingestellt werden, zum Beispiel Währung zu formatieren:

var overrides = { 
 
    // show lables as currency 
 
    scaleLabel: function(label) { 
 
    return '$' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
 
    }, 
 

 
    // String - Template string for single tooltips 
 
    tooltipTemplate: function(label) { 
 
    return '$' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
 
    }, 
 

 
    // String - Template string for multiple tooltips 
 
    multiTooltipTemplate: function(label) { 
 
    return '$' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
 
    } 
 
}

Answer 3

Validated Antwort funktioniert nicht mehr. Für Chart.js V2,

Chart.defaults.global.tooltipTemplate 

ist veraltet.

Stattdessen können Sie Callbacks verwenden, um die angezeigten QuickInfos zu ändern. Es gibt ein Beispiel für die Verwendung der möglichen Rückrufe in der documentation unter Chart.defaults.global.tooltips.

In Ihrem Fall würde ich Folgendes tun:

window.myLine = new Chart(chart, { 
    type: 'bar', 
    data: barChartData, 
    options: { 
      tooltips: { 
       enabled: true, 
       mode: 'single', 
       callbacks: { 
        label: function(tooltipItems, data) { 
         return tooltipItems.yLabel + ' : ' + tooltipItems.xLabel + " Files"; 
        } 
       } 
      }, 
    }  
    }); 

nicht den HTML-Meta-Tag zu setzen Vergessen:

<meta charset="UTF-8"> 

Diese Antwort war Kopie von diesen question.