Beispiele · Heatmap

Heatmap: Beispiele

Eine Heatmap behält Zeilen, Spalten und eine Zahl pro Zelle. Die Farbstärke zeigt Muster, bevor du jeden Wert liest. Gemeint ist eine Zahlen-Heatmap, keine Klickkarte aus der Webanalyse.

Wann passt es?

  • Zwei Dimensionen zugleich zeigen, etwa Team und Wochentag oder Server und Stunde
  • Häufungen und ruhige Bereiche in großen Rastern erkennen
  • Genaue Werte zugänglich halten: Jede Zelle zeigt ihren Wert und ist auslesbar

Wann passt eine andere Form?

Für präzise Vergleiche einzelner Zellen ist Farbstärke ungeeignet. Verwende eine Live-Tabelle oder zeichne eine Zahlenspalte als Balken.

Anwendungsbeispiele

Eine feste Skala für Auslastung

Standardmäßig gelten Minimum und Maximum des Rasters. options.scale fixiert die Skala, hier auf 0 bis 100, damit halbe Auslastung dieselbe Farbstärke erhält.

Mit diesen Daten im Maker öffnen

Spezifikation ansehen 
{
  "type": "heatmap",
  "theme": "ink",
  "title": "CPU-Auslastung nach Stunde in %",
  "source": "Infrastrukturübersicht, gestern",
  "options": {
    "scale": {
      "min": 0,
      "max": 100
    }
  },
  "data": {
    "labels": [
      "00:00",
      "04:00",
      "08:00",
      "12:00",
      "16:00",
      "20:00"
    ],
    "series": [
      {
        "name": "API",
        "values": [
          22,
          18,
          54,
          78,
          82,
          45
        ]
      },
      {
        "name": "Workers",
        "values": [
          35,
          41,
          60,
          71,
          66,
          38
        ]
      },
      {
        "name": "DB",
        "values": [
          28,
          25,
          49,
          88,
          91,
          52
        ]
      }
    ]
  }
}

Fehlende Werte bleiben leer

Eine fehlende Messung ist null, kein Wert von 0. Die Zelle bleibt ohne Zahl und Farbstärke; der Tooltip erklärt die fehlenden Daten.

Mit diesen Daten im Maker öffnen

Spezifikation ansehen 
{
  "type": "heatmap",
  "theme": "mint",
  "title": "Funktionsnutzung nach Tarif",
  "source": "Produktanalyse, letzter Monat",
  "data": {
    "labels": [
      "Editor",
      "Export",
      "API",
      "Anteil"
    ],
    "series": [
      {
        "name": "Free",
        "values": [
          840,
          210,
          null,
          380
        ]
      },
      {
        "name": "Pro",
        "values": [
          960,
          540,
          220,
          410
        ]
      },
      {
        "name": "Team",
        "values": [
          720,
          610,
          480,
          350
        ]
      }
    ]
  }
}
Dieses Diagramm im Maker öffnen Mit Diagramm-Maker neu beginnen

Häufige Fragen

Was ist eine Heatmap?

Ein Zahlenraster, dessen Hintergrundstärke den Wert darstellt. Dunkler bedeutet mehr; eine fünfstufige Skala steht daneben. So werden Streifen, Häufungen und ruhige Zonen sichtbar.

Heatmap oder Statusmatrix?

Heatmapzellen enthalten Zahlen, Statuszellen Urteile wie Ja, Nein oder Teilweise. Wenn du Zahlen erst in hoch, mittel und niedrig einteilst, um sie in eine Statusmatrix zu stecken, passt meist eine Heatmap besser.

Wie wird die Farbskala gewählt?

Der kleinste Wert erhält die schwächste, der größte die stärkste von fünf Stufen. Für einen festen Wertebereich, etwa Prozentwerte oder Punkte von 100, setzt options.scale Minimum und Maximum ausdrücklich.