Demo · Block „Diagramm“
Zahlen, die man sofort versteht.
Balken, Linie, Fläche, Ring und Torte – in den Farben der Website, hell und dunkel passend. Werte tragen Sie im BlockBaustein einer Seite, etwa Text, Bild, Galerie, Karte oder Formular. Seiten setzen Sie aus Blöcken zusammen; jeder Block hat Felder für seine Inhalte und Optionen für die Darstellung. „Diagramm“ ein oder sie kommen aus einer Quelle der Website. Alle Werte auf dieser Seite sind Beispiele.
Balken
Anfragen je Monat
Linie
Besucher diese Woche
Als Tabelle anzeigen
| Diese Woche | Vorwoche | |
|---|---|---|
| Mo | 1.240 | 1.100 |
| Di | 1.310 | 1.150 |
| Mi | 980 | 1.020 |
| Do | 1.402 | 1.210 |
| Fr | 1.720 | 1.480 |
| Sa | 2.105 | 1.690 |
| So | 1.930 | 1.600 |
Ring
Besuche nach Gerät
Als Tabelle anzeigen
| Anteil | |
|---|---|
| Smartphone | 61 % |
| Computer | 33 % |
| Tablet | 6 % |
Balken waagerecht
Meistbesuchte Seiten
Fläche, gestapelt
Woher die Besucher kommen
Als Tabelle anzeigen
| Suchmaschinen | Direkt | Kampagnen | |
|---|---|---|---|
| KWKalenderwoche – in Deutschland nach ISO 8601 gezählt; die erste Woche ist die mit dem ersten Donnerstag des Jahres. 40 | 820 | 410 | 120 |
| KW 41 | 870 | 400 | 260 |
| KW 42 | 910 | 430 | 380 |
| KW 43 | 980 | 450 | 300 |
| KW 44 | 1.020 | 470 | 240 |
So funktioniert’s
Einfach eintragen, überall gleich.
-
Block „Diagramm“
Beschriftungen je Zeile, Werte je Reihe – Zahlen wie gewohnt geschrieben („1.250“, „12,5“). Bis zu acht Reihen, als Zahl, Prozent, Größe oder Dauer.
-
Im Design der Website
Farben aus dem KitIn KLXM Studio das Paket aus Gestaltung und Bausteinen einer Website: Layout, Farben, Schriften und die passenden Blöcke. Ein Kit lässt sich anpassen oder wechseln, die Inhalte bleiben., hell und dunkel eigens gestuft und auf Farbfehlsichtigkeit geprüft; in dunklen Abschnitten automatisch hell auf dunkel.
-
Für alle lesbar
Unter jedem Diagramm „Als Tabelle anzeigen“ mit allen Werten – auch ohne JavaScript – und ein Satz für ScreenreaderSoftware, die Bildschirminhalte vorliest oder in Braille ausgibt. Blinde und sehbehinderte Menschen bedienen damit Computer und Smartphones – Websites müssen dafür sauber aufgebaut sein.de.wikipedia.org (öffnet in neuem Tab).
-
Ohne fremde Server
Die Diagramm-Engine (Apache ECharts) liegt auf Ihrem Server und lädt erst, wenn ein Diagramm sichtbar wird. Keine CookieKleine Datei, die eine Website im Browser speichert, etwa für die Anmeldung oder Einstellungen. Für Cookies, die nicht unbedingt nötig sind (z. B. Statistik, Werbung), brauchen Sie eine Einwilligung.de.wikipedia.org (öffnet in neuem Tab), strenge Sicherheitsregeln (Content-Security-PolicyAngabe des Servers, aus welchen Quellen eine Seite Skripte, Stile, Bilder usw. laden darf. Sie erschwert Angriffe wie Cross-Site-Scripting erheblich.developer.mozilla.org (öffnet in neuem Tab)).
-
Engine austauschbar
Seiten und Erweiterungen beschreiben Diagramme in einem eigenen Format – die Engine lässt sich später tauschen, ohne Inhalte anzufassen.
-
Auch in der Verwaltung
Übersicht, Anfragen und Mitteilungen nutzen dieselben Diagramme; Erweiterungen können eigene Datenquellen für den Block anbieten.
Weitere Demos
Noch mehr ausprobieren.
Alle Beispiele auf einen Blick – mit Demo-Daten, die Sie gefahrlos ausprobieren können.