Charts

Die Grafik Bric bringt die Leistung der Open-Source-JavaScript-Bibliothek charts.js zu Blocs. Mit Unterstützung für Bar, Linie, Kuchen, Krapfen, polar und Radar Diagrammtypen, dies Bric können auf vielfältige Weise genutzt werden, um verschiedenste Daten auf Ihrer Website anzuzeigen.

Die Grafik Bric nicht im Lieferumfang enthalten Blocs Anwendung und kann separat erworben werden hier.

Voraussetzungen:

Die Grafik Bric erfordert mindestens MacOS 12 (Mojave) und funktioniert mit beiden Blocs 4 und 5.

So installieren Sie

Alle Add-Ons können installiert werden Blocs mit dem Erweiterungsmanager. Wenn Sie mit der Installation von Add-Ons nicht vertraut sind, können Sie folgen dem Leitfaden.

Optik

Die Darstellungssteuerelemente werden verwendet, um die visuelle Darstellung eines Diagramms festzulegen.

Design

Das Stil-Dropdown-Menü kann verwendet werden, um den visuellen Stil eines Diagramms auszuwählen. Sie können zwischen Balken, Linie, Kreis, Doughnut, Polarbereich und Radar wählen.

Layout

Das Layout-Steuerelement ist nur für Balken- und Liniendiagrammstile verfügbar. Dieses Dropdown-Menü kann verwendet werden, um das Layout eines Diagramms entweder auf vertikal (Standard) oder horizontal einzustellen. Dieses Steuerelement ist ausgeblendet, wenn ein anderer Diagrammstil ausgewählt ist.

Hintergrundfarbe

Dieses Farbfeld kann verwendet werden, um die Hintergrundfarbe eines Diagramms festzulegen.

Textfarbe

Dieses Farbfeld kann verwendet werden, um die Textfarbe eines Diagramms festzulegen.

Rahmenfarbe

Dieses Farbfeld kann verwendet werden, um die Rahmenfarbe eines Diagramms festzulegen.

Gitterfarbe

Dieses Farbfeld kann verwendet werden, um die Rasterfarbe eines Diagramms festzulegen.

Legend

Die Legendensteuerelemente werden verwendet, um Eigenschaften der Diagrammlegende festzulegen.

Position

Diese Dropdown-Liste wird verwendet, um die Position der Legende festzulegen. Es kann entweder oben, unten, links oder rechts eingestellt werden.

Legende anzeigen

Dieses Kontrollkästchen wird verwendet, um die Sichtbarkeit der Diagrammlegende umzuschalten.

Daten-Management

Die Datensteuerelemente werden verwendet, um die Daten festzulegen, die in einem Diagramm ausgefüllt werden. Abhängig vom Diagrammstil, den Sie erstellen, ist es möglich, sowohl einzelne als auch mehrere Datensätze in ein einzelnes Diagramm einzufügen.

Etiketten

Dieses Texteingabefeld wird verwendet, um das Label-Array festzulegen, das verwendet wird, um den Inhalt der X- oder Y-Achse eines Diagramms zu füllen. Dieser Wert sollte aus der gleichen Anzahl von Elementen bestehen wie das Feld Werte. Jeder Wert muss durch ein Komma getrennt werden.

Kurzcodes beschriften

Blocs unterstützt das schnelle Generieren von Label-Arrays für gängige Datentypen wie Monate oder das Jahr. Die folgenden Funktionscodes können im Feld „Etiketten“ verwendet werden, um schnell entsprechende Etikettendaten zu generieren. Wenn Sie beispielsweise *q1 in das Feld „Etiketten“ eingeben, werden automatisch Januar, Februar, März generiert.

*Monate = Jan, Feb, Mär, Apr, Mai, Jun, Jul, Aug, Sep, Okt, Nov, Dez

*q1 = Januar, Februar, März

*q2 = April, Mai, Juni

*q3 = Juli, August, September

*q4 = Oktober, November, Dezember

*Soziales = Facebook, Instagram, LinkedIn, Reddit, SnapChat, TikTok, Twitter, Youtube

*Krypto = Bitcoin, Ethereum, Tether, XRP, Cardano, Dodgecoin, Solona, ​​Shib, Litecoin, Stellar

*Europa = Europäische Länder auflisten

*Zustände = amerikanische Staaten auflisten

Datensätze

Dieses Dropdown-Menü kann zur Auswahl eines Datensatzes verwendet werden, wodurch die darauf angewendeten Werte und Farben bearbeitet werden können. Diese Option ermöglicht auch das Hinzufügen und Entfernen zusätzlicher Datensätze.

Label

In diesem Textfeld kann die Beschriftung eingestellt werden, die in der Legende für den aktuellen Datensatz verwendet wird.

Werte

Dieses Texteingabefeld wird verwendet, um das Wertearray für den aktuellen Datensatz festzulegen, der verwendet wird, um den Inhalt eines Diagramms zu füllen. Dieses Wertearray sollte aus der gleichen Anzahl von Elementen bestehen wie das Feld Labels. Jeder Wert muss durch ein Komma getrennt werden.

Farbe füllen

Mit diesem Farbfeld kann die Füllfarbe eines Datensatzes eingestellt werden. Diese Option ist nur für Balken-, Linien- und Netzdiagramme verfügbar.

Rahmenfarbe

Mit diesem Farbfeld kann die Rahmenfarbe eines Datensatzes eingestellt werden. Diese Option ist nur für Balken-, Linien- und Netzdiagramme verfügbar.

Seg-Farben

Dieses Texteingabefeld wird verwendet, um das Farbwert-Array für den aktuellen Datensatz festzulegen, der verwendet wird, um den Inhalt eines Diagramms zu füllen. Dieses Wertearray sollte aus der gleichen Anzahl von Elementen bestehen wie das Feld Labels. Jeder Wert muss durch ein Komma getrennt werden. Sie können entweder HEX- oder RGBA-Farbwerte verwenden. Diese Option ist nur für die Diagrammstile Torte, Donut und Polarbereich verfügbar.

Sie können mehr über HEX- und RGBA-Farbwerte lesen hier.

Skala X

Die Steuerelemente „X skalieren“ werden verwendet, um das Erscheinungsbild der X-Achse eines Diagramms anzupassen.

Label

Dieses Texteingabefeld kann verwendet werden, um die Beschriftung für die X-Achse eines Diagramms festzulegen.

Maßstab anzeigen

Dieses Kontrollkästchen wird verwendet, um die Sichtbarkeit der X-Achsendetails eines Diagramms umzuschalten.

Skala Y

Die Steuerelemente „Y-Skala“ werden verwendet, um das Erscheinungsbild der Y-Achse eines Diagramms anzupassen.

Label

Dieses Texteingabefeld kann verwendet werden, um die Beschriftung für die Y-Achse eines Diagramms festzulegen.

Mindestwert

Dieses Texteingabefeld kann verwendet werden, um den bevorzugten Mindestwert für die Y-Achse eines Diagramms festzulegen. Dieser Wert muss numerisch sein und kann entweder positiv (100) oder negativ (-100) sein.

Maximalwert

In diesem Texteingabefeld kann der bevorzugte Maximalwert für die Y-Achse eines Diagramms eingestellt werden. Dieser Wert muss numerisch sein und kann entweder positiv (100) oder negativ (-100) sein.

Schrittlänge

In diesem Texteingabefeld kann die numerische Schrittweite der Y-Achse des Diagramms eingestellt werden. Das Ändern dieses Werts wirkt sich auf die Zahlen aus, die auf der Y-Achse verlaufen. Der Standardschrittwert ist 20, das bedeutet, dass das Diagramm einen Schritt auf der Y-Achse in Schritten von 20 anzeigt, z. 20, 40, 60, 80, 10, 10, 20. Dieser Wert muss numerisch sein.

Maßstab anzeigen

Dieses Kontrollkästchen wird verwendet, um die Sichtbarkeit der Y-Achse eines Diagramms umzuschalten.

Animation

Die Animationssteuerelemente können verwendet werden, um die Art und Weise anzupassen, wie ein Diagramm animiert wird, wenn es auf einer Live-Website in der Vorschau angezeigt wird.

Diagrammanimationen können nur im Vorschaumodus angezeigt werden oder wenn eine Website exportiert/veröffentlicht und über einen Webbrowser geladen wird.

Verzögerung

Dieses Texteingabefeld wird verwendet, um die Verzögerung einer Diagrammanimation anzupassen. Der Wert sollte numerisch sein und wird in Millisekunden gemessen, zB 1000 = 1 Sekunde.

Dauer

Dieses Texteingabefeld wird verwendet, um die Dauer einer Diagrammanimation anzupassen. Der Wert sollte numerisch sein und wird in Millisekunden gemessen, z. B. 1000 = 1 Sekunde. Wenn Sie keine Animation auf einem Diagramm wünschen, setzen Sie diesen Wert auf 0.

Aktualisiert am 15. Februar 2023

War dieser Artikel hilfreich?

Ähnliche Artikel