Plotly.js Demo – 10_Charttools

① Chart.js ② ECharts ③ Plotly.js 🚌 Womo Live (Plotly)

③ Plotly.js 2.x

Aus der wissenschaftlichen Datenvisualisierung. Deklarative Traces: Du definierst eine Liste von traces (was gezeichnet wird) und ein layout (wie es aussieht). Zoom, Pan, RangeSlider und eine komplette Toolbar sind automatisch eingebaut. Besonders stark für: Sankey-Diagramme, 3D-Charts, statistische Plots, Heatmaps, CO2-Visualisierungen. Live-Update über Plotly.react().

MIT Lizenz ✓ ~3.5 MB (groß!) v2.35.2 17k GitHub Stars Sankey / 3D / Geo nativ ✓ Toolbar automatisch ✓

① Liniendiagramm · Trend — Toolbar rechts oben · RangeSlider unten

// Plotly Grundmuster – traces + layout trennen
const traces = [{ // Was gezeichnet wird
  x: [datum1, datum2, ...], y: [wert1, wert2, ...],
  type: 'scatter', mode: 'lines', name: 'Temperatur',
  line: { color: '#00e5ff' }
}];
Plotly.newPlot('element-id', traces, layout);
// Update: Plotly.react() für Live-Daten (effizient)
traces[0].x.push(neuerZeitpunkt); traces[0].y.push(neuerWert);
Plotly.react('element-id', traces, layout);

② Balkendiagramm · Energie pro Tag

// type: 'bar'
traces = [{ x: ['Mo','Di',...],
y: [1.2, 0.9, ...],
type: 'bar', name: 'Solar kWh' }]

③ Kreisdiagramm · Energiequellen

// type: 'pie' – ein einziger Trace
traces = [{ labels: ['Solar',...],
values: [55, 25, 12, 8],
type: 'pie', hole: 0.45 }]