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.
Datum
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.