Beim Bewerten komplexer Leistungsprofile über mehrere qualitative oder quantitative Metriken gleichzeitig ist das Radar-Diagramm (oder Spinnennetz-Diagramm) ein ideales Visualisierungswerkzeug. Indem mehrere Merkmalskategorien entlang radialer Achsen, die von einem zentralen Punkt ausgehen, angeordnet werden, zeigen Radar-Diagramme mehrdimensionale Vergleiche als deutlich abgegrenzte Polygonformen. Dadurch eignen sie sich besonders gut für Fähigkeitsbewertungen, Lieferantenbewertungsbögen, Produktmerkmalsbenchmarks oder Spielerleistungsprofile.
Die Funktionsweise von Radar-Diagrammen
In Apache ECharts basieren Radar-Diagramme auf einem speziellen radar Konfigurationsblock, der die radialen Achsen definiert, bekannt als indicator Schlüssel. Das Series-Objekt setzt type: 'radar' und ordnet numerische Array-Werte jeder deklarierten Indikatorkategorie zu.
1. Grundlegende Einrichtung
Um ein grundlegendes Radar-Diagramm zu erstellen, definieren Sie Ihre Dimensionsschwellenwerte innerhalb von radar.indicator und übergeben Sie numerische Arrays innerhalb Ihrer Series-Daten:
option = {
tooltip: {
trigger: 'item'
},
legend: {
data: ['Zugewiesener Budget', 'Tatsächliche Ausgaben']
},
radar: {
indicator: [
{ name: 'Verkäufe', max: 6500 },
{ name: 'Verwaltung', max: 16000 },
{ name: 'Informationstechnologie', max: 30000 },
{ name: 'Kundensupport', max: 38000 },
{ name: 'Entwicklung', max: 52000 },
{ name: 'Marketing', max: 25000 }
]
},
series: [
{
name: 'Budget gegenüber Ausgaben',
type: 'radar',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: 'Zugewiesener Budget'
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: 'Tatsächliche Ausgaben'
}
]
}
]
};
Fortgeschrittene strukturelle Techniken
Radar-Diagramme können mit gefüllten Flächenpolygonen, kreisförmigen Gitterformen oder deutlich abgesetzten Farbthemen gestaltet werden, um das Überlappen von Profilen leichter lesbar zu machen.
1. Flächenfüllung mit Polygonen und benutzerdefinierten Gitterformen
Durch Umschalten des Hintergrundgitters von Polygon auf Kreis und Anwenden transparenter Flächenfüllungen wird der Gesamtumfang jedes Metrikprofils hervorgehoben:
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
data: ['Modell A', 'Modell B']
},
radar: {
shape: 'circle', // Kreisförmiges Hintergrundgitter
indicator: [
{ name: 'Akku-Lebensdauer', max: 100 },
{ name: 'Verarbeitungsleistung', max: 100 },
{ name: 'Baqualität', max: 100 },
{ name: 'Bildschirmqualität', max: 100 },
{ name: 'Kamera', max: 100 },
{ name: 'Wert', max: 100 }
]
},
series: [
{
type: 'radar',
data: [
{
value: [80, 90, 70, 85, 95, 60],
name: 'Modell A',
areaStyle: {
color: 'rgba(84, 112, 198, 0.4)'
}
},
{
value: [95, 70, 85, 90, 75, 90],
name: 'Modell B',
areaStyle: {
color: 'rgba(145, 204, 117, 0.4)'
}
}
]
}
]
};
Feinabstimmung von Layout und Stil
Durch Anpassen der Farben von Indikatortexten, Spaltlinien und Symbolgrößen wird verhindert, dass mehrachsige Weblinien die Daten überwältigen.
1. Benutzerdefiniertes Web-Gitter und Beschriftungsformat
Formatieren Sie Achsenlinien, Spaltbereiche und äußere Beschriftungen, um einen klaren visuellen Kontrast bei dunklen oder hellen Oberflächen zu gewährleisten:
option = {
radar: {
indicator: [
{ name: 'Usability', max: 10 },
{ name: 'Performance', max: 10 },
{ name: 'Security', max: 10 },
{ name: 'Scalability', max: 10 },
{ name: 'Kosten-Effizienz', max: 10 }
],
axisName: {
color: '#333',
fontSize: 13,
fontWeight: 'bold'
},
splitArea: {
areaStyle: {
color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.1)']
}
},
splitLine: {
lineStyle: {
color: '#ccc'
}
}
},
series: [
{
type: 'radar',
symbolSize: 8,
lineStyle: {
width: 3
},
data: [
{
value: [8.5, 9.0, 7.5, 8.0, 9.5],
name: 'Plattformwert',
itemStyle: {
color: '#5470c6'
},
areaStyle: {
color: 'rgba(84, 112, 198, 0.3)'
}
}
]
}
]
};
Strategische Best Practices
- Standardisieren Sie die Achsenskalen: Stellen Sie sicher, dass alle Indikatoren bei möglichst allen Gelegenheiten normierte Skalenbereiche (z. B. 0 bis 100 oder 1 bis 10) verwenden, damit die äußeren Polygonbereiche ausgewogene Vergleiche widerspiegeln.
- Halten Sie die Überlagerungen von Serien gering: Begrenzen Sie die Radar-Vergleichsformen auf 2 oder 3 pro Diagramm. Überlappende 4 oder mehr gefüllte Polygone machen die einzelnen Formgrenzen schwer zu unterscheiden.
- Verwenden Sie transparente Flächenfüllungen: Wenden Sie immer transparente Füllungen (ca. 0,2–0,4 Deckkraft) an, damit die darunterliegenden Gitterlinien und sich schneidenden Profile auch unter den oberen Ebenen sichtbar bleiben.