Ketika melacak kebiasaan harian, lalu lintas situs web, catatan aktivitas server, atau intensitas penjualan selama tahun kalender penuh, makaGrafik Kalendermemberikan tata letak visual yang efektif berbasis kisi. Dibuat menyerupai grafik kontribusi dan peta panas musiman, grafik kalender memetakan metrik kuantitatif yang terus-menerus di sepanjang hari-hari kalender tertentu, membantu pengguna mengidentifikasi puncak aktivitas tinggi, variasi akhir pekan, dan pola musiman selama beberapa bulan dalam sekali pandang.
Mekanisme Grafik Kalender
Dalam Apache ECharts, grafik kalender menggunakan sistem koordinat khususkalenderyang digabungkan denganpeta panasatausebarantipe seri. Alih-alih sumbu X dan Y kartesius standar, ECharts menghitung posisi kisi hari dan bulan secara otomatis menggunakan string tanggal.
1. Pengaturan Dasar
Untuk membuat peta panas kalender tahunan dasar, tentukan komponenkalenderyang menentukan rentang (misalnya,'2026'), sambungkan denganvisualMapuntuk mengendalikan gradien warna metrik, dan kirimkan pasangan tanggal-nilai harian yang diformat sebagai['YYYY-MM-DD', nilai]:
option = {
judul: {
atas: 10,
kiri: 'tengah',
teks: 'Komit Harian (2026)'
},
tooltip: {
formatter: function (params) {
return params.value[0] + ': ' + params.value[1] + ' komit';
}
},
visualMap: {
min: 0,
maks: 100,
jenis: 'piecewise',
orientasi: 'horizontal',
kiri: 'tengah',
atas: 65,
dalamRentang: {
warna: ['#ebedf0', '#9be9a8', '#40c463', '#30a14e', '#216e39']
}
},
kalender: {
atas: 120,
kiri: 30,
kanan: 30,
ukuranSel: ['otomatis', 13],
rentang: '2026',
gayaItem: {
lebarBatas: 0.5,
warnaBatas: '#ccc'
},
labelTahun: { tampilkan: false }
},
seri: {
jenis: 'peta panas',
sistemKoordinat: 'kalender',
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]
]
}
};
Teknik Struktural Lanjutan
Grafik kalender dapat disesuaikan untuk tata letak gulir vertikal atau disesuaikan dengan representasi sebaran untuk memvisualisasikan metrik harian diskrit.
1. Tampilan Kalender Multi-Bulan Vertikal
Ubah orientasi: 'vertikal' pada komponen kalender untuk menumpuk bulan secara vertikal—ideal untuk widget dashboard yang tinggi atau tata letak mobile:
opsi = {
judul: {
teks: 'Log Aktivitas Q1',
kiri: 'tengah'
},
tooltip: {},
petaVisual: {
min: 0,
maks: 500,
jenis: 'kontinu',
orientasi: 'vertikal',
kanan: 10,
atas: 'tengah',
dalamRentang: {
warna: ['#fef0d9', '#fdcc8a', '#fc8d59', '#d7301f']
}
},
kalender: {
atas: 60,
kiri: 'tengah',
orientasi: 'vertikal',
rentang: ['2026-01-01', '2026-03-31'],
ukuranSel: [20, 20],
labelTahun: { tampilkan: false },
labelHari: {
hariPertama: 1, // Mulai minggu pada Senin
petaNama: 'en'
},
labelBulan: { petaNama: 'en' }
},
seri: {
jenis: 'heatmap',
sistemKoordinat: 'kalender',
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]
]
}
};
Penyesuaian Halus Tata Letak dan Gaya
Menggabungkan sistem koordinat kalender dengan seri titik memungkinkan Anda menyesuaikan ukuran titik berdasarkan intensitas, bukan hanya berdasarkan blok warna.
1. Kalender Titik Gelembung
Menggunakan jenis: 'titik' pada kalender sistem koordinat menciptakan indikator harian gaya gelembung yang interaktif:
opsi = {
judul: {
teks: 'Volume Pesanan Harian',
kiri: 'tengah'
},
tooltip: {
formatter: function (params) {
return params.value[0] + ': ' + params.value[1] + ' pesanan';
}
},
kalender: {
atas: 80,
kiri: 40,
kanan: 40,
rentang: '2026-05',
ukuranSel: ['otomatis', 25],
gayaItem: {
warna: '#f8fafc',
lebarBatas: 1,
warnaBatas: '#e2e8f0'
}
},
seri: {
jenis: 'titik',
sistemKoordinat: 'kalender',
ukuranSimbol: function (val) {
return val[1] / 10; // Menyesuaikan ukuran gelembung berdasarkan jumlah pesanan
},
gayaItem: {
warna: '#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]
]
}
};
Praktik Terbaik Strategis
- Sesuaikan Tanggal dengan Format ISO: Pastikan tanggal di dalam array data seri Anda mengikuti format standar
'YYYY-MM-DD'format string agar kisi kalender memetakan catatan secara akurat. - Konfigurasikan
hariPertamauntuk konsistensi regional: GunakanlabelHari.hariPertama(diatur ke0untuk hari Minggu atau1untuk hari Senin) untuk menyesuaikan dengan kebiasaan kalender lokal audiens Anda. - Pasangkan VisualMap Piecewise untuk Kontribusi: Saat merender grafik commit gaya GitHub, gunakan
piecewisetipe peta visual dengan hentian warna diskret alih-alih gradien kontinu untuk langkah visual kategorikal yang lebih bersih.