① Liniendiagramm · Trend — Mausrad = Zoom · Drag = Pan
// Chart.js Grundmuster – Schritt 1: Objekt erstellen
const chart = new Chart(canvas, {
type: 'line',
data: { labels: [], datasets: [{ data: [], borderColor: '#00c97a' }] },
options: { plugins: { zoom: { wheel: { enabled: true } } } }
});
// Schritt 2: Live-Update (keine Animation!)
labels.push(neuerZeitpunkt); data.push(neuerWert);
chart.update('none'); // 'none' = kein Animations-Overhead
const chart = new Chart(canvas, {
type: 'line',
data: { labels: [], datasets: [{ data: [], borderColor: '#00c97a' }] },
options: { plugins: { zoom: { wheel: { enabled: true } } } }
});
// Schritt 2: Live-Update (keine Animation!)
labels.push(neuerZeitpunkt); data.push(neuerWert);
chart.update('none'); // 'none' = kein Animations-Overhead
② Balkendiagramm · Energie pro Tag
// type: 'bar' – gleiche Struktur wie 'line'
datasets: [{ data: [1.2, 0.8, 1.5, ...],
backgroundColor: '#ffaa00',
borderRadius: 4 // abgerundete Ecken }]
datasets: [{ data: [1.2, 0.8, 1.5, ...],
backgroundColor: '#ffaa00',
borderRadius: 4 // abgerundete Ecken }]
③ Kreisdiagramm · Energiequellen
// type: 'doughnut'
labels: ['Solar', 'Batterie', 'Netz'],
datasets: [{ data: [55, 30, 15],
cutout: '60%' // Lochgröße }]
labels: ['Solar', 'Batterie', 'Netz'],
datasets: [{ data: [55, 30, 15],
cutout: '60%' // Lochgröße }]