JavaScript Chart.js - Benutzerdefinierte Datenformatierung zur Anzeige auf Tooltip

Question

Ich habe verschiedene Dokumentation und ähnliche Fragen hier angesehen, kann aber nicht scheinen, die besondere Lösung zu finden. Entschuldigung, wenn ich etwas Offensichtliches verpasst habe oder diese Frage wiederholt habe!

Als Hintergrundinformationen habe ich 4 Grafiken mit dem Chart.js Plugin implementiert und die benötigten Daten mit PHP aus einer Datenbank übergeben. Das funktioniert alles korrekt und ist in Ordnung.

Mein Problem ist, ich muss die Daten in den Tooltips als formatierte Daten aka anzeigen. als numerisch mit%. Zum Beispiel ist eine meiner Daten aus der Datenbank -0.17222. Ich habe es als Prozentsatz formatiert, um in meiner Tabelle angezeigt zu werden, und alles ist gut. Wenn Sie jedoch die Daten für das Balkendiagramm "chart.js" festlegen, fehlt diesen Daten offensichtlich die Formatierung, und sie wird als "0.17222" angezeigt, was ich nicht möchte.

Sorry, ich wollte ein Bild posten, aber mein Ruf ist zu dumm!

packe ich Daten aus der Datenbank, dann in meinen Tisch gesetzt:

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

Dann füttere ich diese Daten wie so im Abschnitt Diagramm:

data: kpiRex.getDataAtRow(3) 

Jede Hilfe wäre toll! Ich bin seit Stunden daran fest und es ist wahrscheinlich etwas sehr einfaches, das ich übersehe.

Answer 1

Sie möchten eine benutzerdefinierte Tooltip Vorlage in Ihrem Diagramm Optionen angeben, wie folgt aus:

// String - Template string for single tooltips 
tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= value + ' %' %>", 
// String - Template string for multiple tooltips 
multiTooltipTemplate: "<%= value + ' %' %>", 

diese Weise erhalten Sie einen ‚%‘ Zeichen nach dem Werte hinzufügen können, wenn das ist, was Sie wollen.

Hier ist a jsfiddle to illustrate this.

Beachten Sie, dass tooltipTemplate gilt, wenn Sie nur einen Datensatz haben, multiTooltipTemplate gilt, wenn Sie mehrere Datensätze haben.

Diese Optionen werden in der global chart configuration section of the documentation erwähnt. Sieh es dir an, es lohnt sich, nach all den anderen Optionen zu suchen, die dort angepasst werden können.

Beachten Sie, dass Ihre Datensätze nur numerische Werte enthalten sollten. (Keine% Zeichen oder andere Sachen dort).

Answer 2

können Sie tooltipTemplate geben eine Funktion, und formatieren Sie den Tooltip, wie Sie wollen:

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

Diese gegeben ‚v‘ Argumente viele Informationen neben dem ‚Wert‘ Eigenschaft enthalten. Sie können einen 'Debugger' in diese Funktion einfügen und diese selbst überprüfen.

Answer 3

In chart.js 2.1.6 habe ich so etwas wie dieses (in Typoskript):

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

Answer 4

Für chart.js 2.0+, das hat sich geändert (nicht mehr tooltipTemplate/multiTooltipTemplate).Für diejenigen, die nur den aktuellen, unformatierten Wert zugreifen mögen und starten Sie es zwicken, ist der Standard-Tooltip die gleiche wie:

options: { 
    tooltips: { 
     callbacks: { 
      label: function(tooltipItem, data) { 
       return tooltipItem.yLabel; 
      } 
     } 
    } 
} 

D.h. Sie Änderungen an tooltipItem.yLabel zurückkehren können, die den Wert der y-Achse hält. In meinem Fall wollte ich ein Dollarzeichen, Rundung und von tausenden Komma für eine finanzielle Chart addieren, so dass ich verwendet:

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; 
       }); 
      } 
     } 
    } 
} 

Answer 5

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