Node-Red configuration
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

ui_chart.html 2.5KB

12345678910111213141516171819202122232425
  1. <script type="text/html" data-help-name="ui_chart">
  2. <p>Zeichnet Eingangswerte in ein Diagramm, welches entweder ein zeitbasiertes Liniendiagramm,
  3. ein Balkendiagramm (vertikal oder horizontal) oder ein Kreisdiagramm sein kann.</p>
  4. <p>Jede eingehende <code>msg.payload</code>-Nachricht wird in einen Zahlenwert konvertiert.
  5. Wenn die Konvertierung fehlschlägt, wird die Nachricht ignoriert.</p>
  6. <p>Die Minimum- und Maximum-Werte für die <b>Y-Achse</b> sind optional.
  7. Ohne diese wird das Diagramm automatisch anhand aller empfangenen Werte skaliert.</p>
  8. <p>Mehrere Serien können im gleichen Diagramm angezeigt werden,
  9. indem für jede Eingangsnachricht andere <code>msg.topic</code>-Werte verwendet werden.
  10. Mit der Eigenschaft <code>msg.label</code> können mehrere Balken der selben Serie angezeigt werden.</p>
  11. <p>Der Wertebereich der <b>X-Achse</b> wird durch ein Zeitfenster oder eine maximale Anzahl anzuzeigender Punkte vorgegeben.
  12. Ältere Daten werden automatisch aus dem Diagramm entfernt.
  13. Die Achsenbeschriftung kann mittels einer <a href="https://momentjs.com/docs/#/displaying/format/" target="_blank">
  14. Moment.js-zeitformatierten</a> Zeichenfolge benutzerdefiniert werden (z.B. D.M.Y für 21.3.2021).</p>
  15. <p>Wird eine <code>msg.payload</code>-Nachricht mit einem leeren Array <code>[]</code> an den Eingang gesendet,
  16. so wird das Diagramm gelöscht.</p>
  17. <p><b><a href="https://github.com/node-red/node-red-dashboard/blob/master/Charts.md" target="_new">Hier</a></b>
  18. sind weitere Informationen zum Vorformatieren von Daten verfügbar, um sie als vollständiges Diagramm zu übergeben.</p>
  19. <p>Das <b>Leer-Text</b>-Feld kann verwendet werden, um den Text im Diagramm anzuzeigen, bevor gültige Daten empfangen wurden.
  20. <p>Der <b>Beschriftung</b> kann auch durch eine Nachrichteneigenschaft festgelegt werden.
  21. Dazu muss der Name der Eigenschaft in das Feld eingetragen werden, zum Beispiel <code>{{msg.topic}}</code>.</p>
  22. <p>Der Node-Ausgang enthält ein Array des Diagrammstatus, das bei Bedarf gespeichert werden kann.
  23. Wird dieses zum <code>ui_chart</code>-Node gesendet, so werden die gespeicherten Daten erneut angezeigt.</p>
  24. <p>Wenn eine <b>Klasse</b> angegeben ist, wird sie der übergeordneten Karte hinzugefügt. Auf diese Weise können Sie CSS-Stile auf die ui-card und ihre untergeordneten Elemente anwenden. Die Klasse kann zur Laufzeit festgelegt werden, indem eine Zeichenfolgeneigenschaft <code>msg.className</code> festgelegt wird.</p>
  25. </script>