Wenn tägliche Gewohnheiten, Website-Verkehr, Server-Aktivitätsprotokolle oder Verkaufsintensität über volle Kalenderjahre verfolgt werden, bietet das Kalenderdiagramm bietet eine effektive, gitterbasierte visuelle Darstellung. Nach Vorbild von Beitragsgrafiken und saisonalen Wärmekarten ordnen Kalenderdiagramme kontinuierliche quantitative Kennzahlen auf bestimmten Kalendertagen ab und helfen Benutzern, Hochphasen der Aktivität, Wochenendvariationen und mehrmonatige saisonale Muster auf einen Blick zu erkennen.
Die Funktionsweise von Kalenderdiagrammen
In Apache ECharts verwenden Kalenderdiagramme ein spezielles KalenderKoordinatensystem in Verbindung mit einem Wärmekarte oder StreudiagrammSeriensystem. Anstelle der standardmäßigen kartesischen X- und Y-Achsen berechnet ECharts die Positionen von Tagen und Monaten automatisch anhand von Datumszeichenfolgen.
1. Grundlegende Einrichtung
Um eine grundlegende jährliche Kalender-Wärmekarte zu erstellen, definieren Sie eine KalenderKomponente, die einen Bereich angibt (z. B. '2026'), hängen Sie eine visualMapan, um die Farbverläufe der Kennzahlen zu steuern, und übergeben Sie tägliche Datums-Wert-Tupel im Format ['JJJJ-MM-TT', Wert]:
option = {
title: {
top: 10,
left: 'center',
text: 'Tägliche Commits (2026)'
},
tooltip: {
formatter: function (params) {
return params.value[0] + ': ' + params.value[1] + ' Commits';
}
},
visualMap: {
min: 0,
max: 100,
type: 'piecewise',
orient: 'horizontal',
left: 'center',
top: 65,
inRange: {
color: ['#ebedf0', '#9be9a8', '#40c463', '#30a14e', '#216e39']
}
},
calendar: {
top: 120,
left: 30,
right: 30,
cellSize: ['auto', 13],
range: '2026',
itemStyle: {
borderWidth: 0.5,
borderColor: '#ccc'
},
yearLabel: { show: false }
},
series: {
type: 'heatmap',
coordinateSystem: 'calendar',
data: [
['2026-01-01', 12], ['2026-01-02', 45], ['2026-01-03', 88],
['2026-02-14', 95], ['2026-03-20', 30], ['2026-05-10', 65],
['2026-07-27', 82], ['2026-10-31', 99], ['2026-12-25', 10]
]
}
};
Erweiterte strukturelle Techniken
Kalenderdiagramme können für vertikale Scrolllayouts angepasst oder mit Streudiagramm-Darstellungen personalisiert werden, um diskrete tägliche Kennzahlen darzustellen.
1. Vertikale Mehrmonats-Kalenderansicht
Ändern Sie orient: 'vertical' auf dem Kalender-Component, um Monate vertikal zu stapeln – ideal für hohe Dashboard-Widgets oder mobile Layouts:
option = {
title: {
text: 'Aktivitätsprotokoll Q1',
left: 'center'
},
tooltip: {},
visualMap: {
min: 0,
max: 500,
type: 'continuous',
orient: 'vertical',
right: 10,
top: 'center',
inRange: {
color: ['#fef0d9', '#fdcc8a', '#fc8d59', '#d7301f']
}
},
calendar: {
top: 60,
left: 'center',
orient: 'vertical',
range: ['2026-01-01', '2026-03-31'],
cellSize: [20, 20],
yearLabel: { show: false },
dayLabel: {
firstDay: 1, // Woche beginnt am Montag
nameMap: 'en'
},
monthLabel: { nameMap: 'en' }
},
series: {
type: 'heatmap',
coordinateSystem: 'calendar',
data: [
['2026-01-05', 120], ['2026-01-18', 340], ['2026-02-02', 480],
['2026-02-20', 210], ['2026-03-15', 410], ['2026-03-28', 190]
]
}
};
Feinabstimmung von Layout und Stil
Die Kombination von Kalender-Koordinatensystemen mit Streuungsreihen ermöglicht es Ihnen, die Punktgrößen basierend auf der Intensität statt nur anhand von Farbflächen zu skalieren.
1. Streuungs-Bubble-Kalender
Verwenden von type: 'scatter' auf einem KalenderKoordinatensystem erstellt interaktive Blasen-ähnliche tägliche Indikatoren:
option = {
title: {
text: 'Tägliche Bestellmenge',
left: 'center'
},
tooltip: {
formatter: function (params) {
return params.value[0] + ': ' + params.value[1] + ' Bestellungen';
}
},
calendar: {
top: 80,
left: 40,
right: 40,
range: '2026-05',
cellSize: ['auto', 25],
itemStyle: {
color: '#f8fafc',
borderWidth: 1,
borderColor: '#e2e8f0'
}
},
series: {
type: 'scatter',
coordinateSystem: 'calendar',
symbolSize: function (val) {
return val[1] / 10; // Skaliert die Blasengröße entsprechend der Bestellanzahl
},
itemStyle: {
color: '#3b82f6',
opacity: 0.8
},
data: [
['2026-05-01', 120], ['2026-05-05', 240], ['2026-05-12', 180],
['2026-05-18', 310], ['2026-05-22', 90], ['2026-05-28', 270]
]
}
};
Strategische Best Practices
- Datumsformate an ISO-Standard anpassen: Stellen Sie sicher, dass die Daten in Ihrem Series-Array im Standardformat
'YYYY-MM-DD'als Zeichenfolgenformat verwendet werden, damit das Kalender-Raster die Datensätze genau abbildet. - Konfigurieren Sie
firstDayfür regionale Konsistenz: Verwenden SiedayLabel.firstDay(auf0für Sonntag oder1für Montag) um die lokalen Kalenderkonventionen Ihrer Zielgruppe zu berücksichtigen. - Paarweise Stufenvisualisierung für Beiträge: Beim Rendern von GitHub-artigen Commit-Graphen verwenden Sie eine
stufenweiseVisualisierungstyp mit diskreten Farbstopps anstelle kontinuierlicher Verläufe, um klarere kategorische visuelle Schritte zu erzielen.