Beispiel-CSV
| Date | Commits |
|---|---|
| 2024-01-01 | 8 |
| 2024-01-02 | 6 |
| 2024-01-03 | 9 |
| 2024-01-04 | 6 |
| 2024-01-05 | 12 |
How to Create a Calendar Heatmap
A step by step walkthrough for turning a sheet of dates and daily values into a published calendar heatmap in PlotSet, with one shaded square for every day.
Etwa 6 MinutenOne square for each day, laid out in calendar weeks and shaded by how much happened: that is what you will have. Busy weekdays, quiet weekends, seasonal swells and long gaps all show up at a glance.
Expect about six minutes. The template needs just two columns, so most of the time goes on choosing a colour theme and checking the scale.
Die Daten, die Sie brauchen
One row per day with two columns: a date, and the number for that day.
Use one row per day. Days you leave out are drawn in the no-data colour.
ISO dates, such as 2024-01-05, are the safest. Anything the platform's date parser accepts will work.
The grid spans every year present in your data, with one band per year.
A day with a value of zero is not the same as a missing day. Keep zeros if they are real readings.
Die Schritte
Der genaue Klickpfad in PlotSet, von einer leeren Vorlage bis zum fertigen Diagramm.
- 01
Open the Calendar Heatmap template
From the PlotSet dashboard, start a new project and choose Calendar Heatmap from the Heatmaps category. It loads with two years of sample commits so you can see the layout straight away.
Jede Anleitung beginnt hier. Wählen Sie erst die Kategorie, dann die Vorlage. Das Raster ist für jeden Diagrammtyp dasselbe. - 02
Prepare your daily data
Put the date in the first column and the number in the second, one row per day. Remove any blank or text rows from the number column.
- 03
Upload the file, or connect it live
Import a CSV or .xlsx file from the data panel, paste rows from a spreadsheet, or connect a Google Sheet so the chart can follow your updates. The first row is read as the headers.
Die Datenansicht, hier in einem Balkendiagramm-Projekt. Laden Sie über "Upload CSV File" eine CSV-Datei hoch, holen Sie die Zahlen mit "Magic Import" aus einem Bild oder verbinden Sie ein Google Sheet. Der Bereich sieht bei jedem Diagrammtyp gleich aus. - 04
Check the column bindings
Confirm that the date column is bound to dates and the other column to values. This is usually right automatically when the headers are clear.
Die Zuordnungen legen fest, welche Spalte zur Beschriftung wird, welche die Werte liefert und welche die Farbe steuert. "Auto Binding" errät sie anhand Ihrer Spaltenüberschriften. Prüfen Sie das Ergebnis, statt sich darauf zu verlassen. - 05
Choose a colour theme
In the Color tab pick a theme for the scale, and set the colour for days with no data. Keep the no-data colour clearly different from the palest shade of the scale.
Der Tab "Preview" für ein Diagramm vom Typ "Calendar Heatmap". Alle Gestaltungsoptionen stecken im umrandeten Bereich: Aussehen, Kopfzeile, Fußzeile und die Optionen, die es speziell für diesen Diagrammtyp gibt, jeweils in einem eigenen Tab. - 06
Tune the cells and labels
In the Cells tab set the square size, corner radius and gap. In the Labels tab show or hide the month, weekday and year labels.
- 07
Set the colour scale
Leave the Scale tab on automatic, or enter a minimum and maximum so a single extreme day does not wash out the rest.
- 08
Add the legend, title and source
Style the legend ramp, then use the Header and Footer tabs for a title, a subtitle and a source line.
- 09
Publish or export
Publish for a live chart and copy the embed code from the Share dialog, or use Export for a PNG or SVG.
Über "Share" werden aus dem fertigen Diagramm ein öffentlicher Link und ein Einbettungscode.
Starten Sie mit der Calendar Heatmap-Vorlage samt bereits geladenen Beispieldaten und ersetzen Sie diese durch Ihre eigenen.
Vorlage öffnenVeröffentlichen, einbetten oder exportieren
Der letzte Abschnitt ist bei jedem Diagrammtyp gleich: "Share" macht aus dem Diagramm einen öffentlichen Live-Link und einen Einbettungscode, "Export" schreibt es als statische Datei heraus.
"Share": öffentlicher Link und Einbettungscode
Aktivieren Sie den Einbettungscode und den öffentlichen Link, um das Diagramm zu veröffentlichen. Den Link können Sie bedenkenlos an alle weitergeben, und der Einbettungscode fügt sich als iframe in jede Seite ein. Die Tooltips beim Überfahren mit der Maus und die volle Interaktivität bleiben erhalten. Wenn Sie das Diagramm später bearbeiten, überträgt "Recreate" die Änderungen auf Link und Einbettung.
"Export": SVG, PNG oder JPG
"Export" schreibt eine statische Kopie in der Größe heraus, die Sie brauchen. SVG bleibt in jeder Skalierung scharf und lässt sich weiterhin in einem Design-Tool bearbeiten; PNG und JPG sind die sichere Wahl für Folien und Dokumente. Der Skalierungsfaktor sorgt dafür, dass das Bild auf einem Retina-Display gestochen scharf wirkt.
Styling-Tipps für Calendar Heatmap
Start with a single year
One year gives the largest squares and the clearest reading of the weekly rhythm.
Cap the scale
If one day dwarfs the rest, set a custom maximum and say so in the footer.
Keep real zeros
A quiet day is a fact. Only leave a day out when you truly have no reading.
Use the tooltip
Hovering a square shows its date and value, so you do not need to print numbers on every cell.
Häufige Fehler bei Calendar Heatmap
The grid is empty
Dates probably failed to parse. Use ISO dates and check the date column is bound correctly.
Everything looks the same shade
An outlier is stretching the scale. Set a custom maximum in the Scale tab.
The squares are tiny
Too many years are crowding the grid. Trim the data to the span you need.
Missing days look like low days
Make the no-data colour clearly different from the low end of the scale.
Mehr über Calendar Heatmap erfahren
Nicht sicher, ob Calendar Heatmap die richtige Wahl ist? Erfahren Sie, was es ist, wann Sie es verwenden sollten und wann nicht.
Calendar Heatmap: häufige Fragen
A date column and a numeric value column, with one row per day.
Jetzt Calendar Heatmap erstellen
Kostenlos starten mit über 300 Vorlagen. Keine Kreditkarte erforderlich.