wake-up-neo.com

JavaScript Chart.js - Benutzerdefinierte Datenformatierung zur Anzeige in der QuickInfo

Ich habe mir hier verschiedene Dokumentationen und ähnliche Fragen angesehen, kann aber anscheinend keine bestimmte Lösung finden. Entschuldigung, wenn ich etwas Offensichtliches verpasst oder diese Frage wiederholt habe!

Als Hintergrundinformation habe ich 4 Grafiken mit dem Chart.js-Plugin implementiert und die erforderlichen Daten mit PHP aus einer Datenbank übergeben. Dies funktioniert alles korrekt und ist in Ordnung.

Mein Problem ist, dass ich die Daten in den QuickInfos als formatierte Daten anzeigen muss. als numerisch mit%. Als Beispiel ist eine meiner Daten aus der Datenbank -0.17222. Ich habe es als Prozentsatz formatiert, um es in meiner Tabelle anzuzeigen, und alles ist in Ordnung. Beim Festlegen der Daten für das Balkendiagramm chart.js fehlt diesen Daten jedoch offensichtlich diese Formatierung, und sie werden als -0,17222 angezeigt, was ich nicht möchte.

Entschuldigung, ich wollte ein Bild posten, aber mein Ruf ist zu blöd!

Ich greife nach Daten aus der Datenbank und setze sie in meine Tabelle:

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

Dann füttere ich diese Daten wie folgt im Diagrammbereich:

data: kpiRex.getDataAtRow(3)

Jede Hilfe wäre toll! Ich habe stundenlang daran festgehalten und es ist wahrscheinlich etwas wirklich Einfaches, das ich übersehen habe.

45
Laura Thomas

Sie möchten eine benutzerdefinierte QuickInfo-Vorlage in Ihren Diagrammoptionen wie folgt angeben:

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

Auf diese Weise können Sie nach Ihren Werten ein% -Zeichen einfügen, wenn Sie dies wünschen.

Hier ist a jsfiddle , um dies zu veranschaulichen .

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

Diese Optionen werden im Abschnitt Globale Diagrammkonfiguration der Dokumentation erwähnt. Schauen Sie doch mal rein, es lohnt sich, nach allen anderen Optionen zu suchen, die dort angepasst werden können.

Beachten Sie, dass Ihre Datensätze nur numerische Werte enthalten sollten. (Keine% Zeichen oder anderes Zeug da).

34
rtome

Für chart.js 2.0+ hat sich dies geändert (kein tooltipTemplate/multiTooltipTemplate mehr). Für diejenigen, die nur auf den aktuellen, unformatierten Wert zugreifen und mit der Optimierung beginnen möchten, ist der Standard-Tooltip derselbe wie:

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

Sie können also Änderungen an tooltipItem.yLabel, der den Wert der y-Achse enthält. In meinem Fall wollte ich ein Dollarzeichen, eine Rundung und tausend Kommas für ein Finanzdiagramm hinzufügen. Deshalb habe ich Folgendes 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;
                });
            }
        }
    }
}
96
Kyrth

In chart.js 2.1.6 habe ich so etwas gemacht (in TypeScript):

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

Sie können tooltipTemplate eine Funktion geben und den Tooltip wie gewünscht formatieren:

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

Die angegebenen 'v'-Argumente enthalten neben der' value'-Eigenschaft viele Informationen. Sie können einen 'Debugger' in diese Funktion einfügen und diese selbst überprüfen.

11
Ariel Cabib
tooltips: {
          callbacks: {
            label: (tooltipItem, data) => {
              // data for manipulation
              return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
            },
          },
        },
5
Admir

In Chart.Js 2.8.0 finden Sie die Konfiguration für benutzerdefinierte QuickInfos hier: https://www.chartjs.org/docs/latest/configuration/tooltip.html#label-callback (Vielen Dank bis @ prokaktus )

Wenn Sie z. Zeigen Sie einige Werte mit einem Präfix oder Postfix an (im Beispiel fügt das Skript den Werten im Diagramm eine Einheit von kWh hinzu).

options: {
  rotation: 1 * Math.PI,
  circumference: 1 * Math.PI,
  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        console.log(data);
        console.log(tooltipItem);

        var label = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] || '';

        if (label) {
          label += ' kWh';
        }

        return label;
      }
    }
  }
}

Ein Beispiel für eine Geige gibt es auch hier: https://jsfiddle.net/y3petw58/1/

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

Sie müssen Label Callback verwenden. Das folgende Beispiel rundet Datenwerte auf zwei Dezimalstellen.

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var label = data.datasets[tooltipItem.datasetIndex].label || '';

                    if (label) {
                        label += ': ';
                    }
                    label += Math.round(tooltipItem.yLabel * 100) / 100;
                    return label;
                }
            }
        }
    }
});

Lassen Sie mich nun das Szenario beschreiben, in dem ich die Label-Callback-Funktion verwendet habe.

Beginnen wir mit der Protokollierung der Argumente der Label Callback-Funktion. Hier sehen Sie eine ähnliche Struktur wie in den Datensätzen. Das Array besteht aus verschiedenen Linien, die Sie im Diagramm darstellen möchten. In meinem Fall ist es 4, deshalb ist die Länge des Datasets-Arrays 4.

enter image description here

In meinem Fall musste ich einige Berechnungen für jeden Datensatz durchführen und jedes Mal, wenn ich über einer Linie in einem Diagramm schwebe, die richtige Linie identifizieren.

Um verschiedene Zeilen zu unterscheiden und die Daten des schwebenden Tooltips basierend auf den Daten anderer Zeilen zu manipulieren, musste ich diese Logik schreiben.

  callbacks: {
    label: function (tooltipItem, data) {
      console.log('data', data);
      console.log('tooltipItem', tooltipItem);
      let updatedToolTip: number;
      if (tooltipItem.datasetIndex == 0) {
        updatedToolTip = tooltipItem.yLabel;
      }
      if (tooltipItem.datasetIndex == 1) {
        updatedToolTip = tooltipItem.yLabel - data.datasets[0].data[tooltipItem.index];
      }
      if (tooltipItem.datasetIndex == 2) {
        updatedToolTip = tooltipItem.yLabel - data.datasets[1].data[tooltipItem.index];
      }
      if (tooltipItem.datasetIndex == 3) {
        updatedToolTip = tooltipItem.yLabel - data.datasets[2].data[tooltipItem.index]
      }
      return updatedToolTip;
    }
  } 

Das oben erwähnte Szenario ist praktisch, wenn Sie verschiedene Linien im Liniendiagramm zeichnen und den Tooltip des schwebenden Punkts einer Linie bearbeiten müssen, basierend auf den Daten eines anderen Punkts, der zu einer anderen Linie im Diagramm am gleichen Index gehört.

0
Divyanshu Rawat