Erstelle Balken-, Linien- oder Kreisdiagramme, um deinen Besuchern Daten in einem ansprechenden Format zu präsentieren.

Verwenden Sie Diagramm-Blöcke, um Datenvisualisierungen auf Ihrer Website zu erstellen. Diagramme eignen sich hervorragend, um Beziehungen zwischen verschiedenen Datenreihen auf überzeugende Weise zu erklären. Sie können Balkendiagramme, Liniendiagramme und Kreisdiagramme erstellen und gestalten.

Diagramm-Blöcke sind eine gute Alternative zum Einbetten statischer Bilder von Diagrammen, die in Programmen außerhalb von Squarespace erstellt wurden. Die Größe der Diagramme wird entsprechend angepasst, um sicherzustellen, dass sie in mehreren Bildschirmgrößen gut aussehen, und du kannst die Daten jederzeit aktualisieren.

Tipp: In dieser Anleitung wird erläutert, wie du deiner Website Diagramme hinzufügst. Um eine Tabelle mit Spalten und Zeilen hinzuzufügen, kannst du benutzerdefinierten Code hinzufügen. Um mehr zu erfahren, besuche diesen Beitrag im Squarespace Forum.

Bitte beachte, dass benutzerdefinierte Code-Modifikationen nicht von unserem Support abgedeckt werden. Das bedeutet, dass wir keine Unterstützung bei der Einrichtung oder Fehlerbehebung codebasierter Lösungen bieten können.

Bevor du loslegst

Wir empfehlen, Daten in Form einer CSV-Datei in einem Tabellenkalkulationsprogramm wie Excel oder Google Tabellen vorzubereiten. Stelle sicher, dass die Spalten und Zeilen über Header verfügen, damit sie im Block als Header erkannt werden.

Einen Diagramm-Block hinzufügen

So fügen Sie einen Diagramm-Block hinzu:

1. Bearbeite eine Seite oder einen Beitrag, klicke auf Block hinzufügen oder auf eine Einfügemarke und klicke dann auf Diagramm. Weitere Informationen findest du unter Inhalte mithilfe von Blöcken hinzufügen.
2. Öffne den Block-Editor, indem du auf das Bleistiftsymbol auf dem Block klickst.
3. Wähle Balkendiagramm, Liniendiagramm oder Kreisdiagramm aus. Der Diagramm-Editor wird geöffnet – darin siehst du eine Vorschau des Diagramms mit Platzhalterinhalten.

4. Verwende den Tab Daten oder Import / Export, um Daten hinzuzufügen.
5. Verwende den Tab Design, um das Diagramm zu gestalten. Wenn deine Website Version 7.0 nutzt, klicke auf Anwenden, um deine Änderungen zu veröffentlichen.

Für detailliertere Anweisungen ziehen Sie bitte die folgenden Abschnitte zu Rate.

Diagramm-Block-Layouts

Hier sind Beispiele für jedes Diagramm-Block-Layout. Du kannst das Layout im Tab „Daten“ des Diagramm-Blocks ändern. Beim Auswählen eines Layouts wird dir eine Vorschau davon auf der Seite angezeigt. Möglicherweise musst du deine Daten neu formatieren, um sie optimal an das neue Layout anzupassen.

Daten hinzufügen

Nach der Auswahl des Diagrammtyps kannst du den Tab „Import / Export“ verwenden, um Daten aus einer CSV-Datei zu importieren, oder den Tab „Daten“, um Daten manuell hinzuzufügen.

Hinweis: Du kannst bis zu 25 Zeilen und 25 Spalten hinzufügen. Nur Zahlen können eingegeben werden. Der Editor wandelt alle Dollarzeichen ($) in Nullen um.

Option 1 - Copy data from a .csv

Wenn Sie eine Tabelle mit Daten haben, können Sie diese aus einer Klartext-CSV- Datei kopieren und einfügen. Wir empfehlen diese Methode, besonders wenn viele Daten vorhanden sind und Sie mit dem Erstellen von Tabellenkalkulationen in Excel oder Google Sheets vertraut sind.

Tip: In your spreadsheet program, use column and row headers to create labels for the chart. You’ll then open the .csv in a plain text editor since the block can’t import cells from a spreadsheet.

1. Lassen Sie den Diagramm-Block-Editor geöffnet.
2. In your spreadsheet program, save your data as a .csv file.
3. Open the file in a plain text editor like Notepad or TextEdit.
4. Markiere alles und kopiere den Text.
5. Klicke im Block-Editor auf Import / Export.
6. Lösche die Platzhalterdaten im Feld „Diagrammdaten“.
7. Paste the text you copied from the .csv.
8. Klicke auf Aktualisieren und in der daraufhin erscheinenden Mitteilung auf Bestätigen.
9. The chart preview will refresh with new data.

Daten im Tab „Import / Export“ sollten ungefähr so aussehen:

Option 2 - Enter or edit data manually

Sie können das Diagramm von Grund auf neu erstellen, indem Sie die Zeilen einzeln im Block-Editor eingeben. Verwenden Sie diese Option, wenn Sie keine bestehenden Daten haben oder wenn das Diagramm relativ einfach sein soll. Sie können diese Schritte auch nach dem Import befolgen, um sämtliche Daten zu bearbeiten.

1. Entfernen Sie im Tab „Daten“ des Block-Editors Platzhalterzeilen, indem Sie diese per Drag-and-Drop im erscheinenden Papierkorb ablegen.
2. Klicke auf das Pluszeichen rechts oben, um neue Spalten und Kopfzeilen hinzuzufügen. Kreisdiagramm-Blöcke können nur über zwei Spalten verfügen.
3. Klicke auf das Pluszeichen links unten, um neue Zeilen und Kopfzeilen hinzuzufügen.
4. Klicken Sie in eine Zelle, um neue Daten einzugeben oder Platzhalterdaten zu ersetzen. Füllen Sie alle Zellen. Während Sie Daten eingeben, wird die Diagrammvorschau aktualisiert.

Tip: Navigate between cells and rows with the Tab key, just like in any spreadsheet program.

5. Aktivieren Sie X- und Y-Achsen spiegeln, um die Art und Weise zu ändern, wie Daten dargestellt werden. Wir empfehlen dies nicht für Kreisdiagramm-Blöcke.

Tipps zur Formatierung

Wie Sie Ihre Daten formatieren, hängt von der Art des verwendeten Diagramm-Blocks ab. Um mehr über das Formatieren der einzelnen Diagramme zu erfahren, befolgen Sie diese Tipps.

Das Diagramm gestalten

Im Tab „Design“ kannst du benutzerdefinierten Text hinzufügen, eine Legende anzeigen und eine Farbpalette auswählen. Um mehr über diese Designoptionen zu erfahren, sieh dir die folgende Tabelle an:

Den Text gestalten

Verwende Website-Stil, um die Schriftart und Farbe des Textes des Blocks zu ändern. Wie du den Text gestaltest, hängt von der Version deiner Squarespace-Website ab.

Diagrammdaten exportieren

So sichern Sie Ihre Daten in einer CSV- Datei außerhalb von Squarespace:

1. Öffne das Menü „Seiten“.
2. Klicke auf der Seite oder in dem Eintrag, wo der Diagramm-Block angezeigt, auf Bearbeiten
3. Doppelklicke auf den Diagramm-Block.
4. Klicke auf Import / Export.
5. Kopiere die Daten im Feld „Diagrammdaten“.
6. Paste the data into a plain text editor.
7. Save the file as a .csv. This converts the file into a spreadsheet.