Parallel-Diagramm: Analyse mehrdimensionaler Daten

Beim Vergleich mehrdimensionaler Datenpunkte über viele numerische oder kategorische Achsen gleichzeitig ist das Parallel-Koordinaten-Diagrammein unverzichtbares visuelles Werkzeug. Anstatt Koordinaten auf senkrecht zueinander stehende horizontale und vertikale Achsen abzubilden, stellen parallele Diagramme alle Dimensionen nebeneinander als parallele Linien dar. Individuelle Datenpunkte werden als kontinuierliche Polygonzüge dargestellt, die jede Achse schneiden, wodurch es einfach ist, mehrdimensionale Cluster, Kompromisse, Korrelationen und Ausreißer zu erkennen—beispielsweise beim Vergleich von Automodellen hinsichtlich Leistung, Gewicht, Kraftstoffverbrauch, Preis und Sicherheitsbewertung.

Die Funktionsweise von Parallel-Diagrammen

In Apache ECharts basieren Parallel-Koordinaten-Diagramme auf einem speziellen parallelAxisKonfigurationsblock, der jede parallele Skala definiert (ihre Achsen-Index, Dimensionsname und Datentyp). Die Diagrammreihe setzt type: 'parallel'und ordnet Zeilen von mehrdimensionalen Wertarrays jedem entsprechenden Achsen-Index zu.

1. Grundlegende Einrichtung

Um ein grundlegendes Parallel-Diagramm zu erstellen, definieren Sie Ihre Dimensionen im parallelAxisArray und übergeben Sie entsprechende Koordinaten-Arrays innerhalb Ihrer Reihe data:

option = {
    parallelAxis: [
        { dim: 0, name: 'Preis ($)' },
        { dim: 1, name: 'Bewertung' },
        { dim: 2, name: 'Gewicht (kg)' },
        { dim: 3, name: 'Leistung (PS)' }
    ],
    series: [
        {
            type: 'parallel',
            lineStyle: {
                width: 2
            },
            data: [
                [1299, 4.5, 1.2, 120],
                [899, 4.0, 1.5, 95],
                [1599, 4.8, 1.1, 150],
                [499, 3.5, 2.0, 80],
                [2100, 4.9, 0.9, 180]
            ]
        }
    ]
};

Erweiterte strukturelle Techniken

Parallel-Diagramme können mit visuellen Farbverläufen oder gemischten kategorischen Skalen kombiniert werden, um komplexe Kompromisse über verschiedene Produktkategorien hinweg zu bewerten.

1. Visuelle Farbverläufe über Dimensionen hinweg

Kombinieren Sie eine visualMapKomponente mit einer Schlüsselachsen-Dimension (z. B. Abbildung der Linienfarbe auf Leistungsbeurteilungen), um sofort Spitzenleistungen über alle parallelen Achsen hinweg hervorzuheben:

option = {
    parallelAxis: [
        { dim: 0, name: 'CPU-Kerne' },
        { dim: 1, name: 'RAM (GB)' },
        { dim: 2, name: 'Speicher (TB)' },
        { dim: 3, name: 'Monatliche Kosten ($)', min: 0, max: 200 }
    ],
    visualMap: {
        show: true,
        type: 'continuous',
        min: 0,
        max: 200,
        dimension: 3, // Farbliche Darstellung der Linienpfade basierend auf dem Dimensionsindex 3 (Monatliche Kosten)
        inRange: {
            color: ['#91cc75', '#fac858', '#ee6666'] // Grün (niedrige Kosten) bis Rot (hohe Kosten)
        },
        orient: 'horizontal',
        top: '2%',
        left: 'center'
    },
    parallel: {
        top: '18%',
        bottom: '10%'
    },
    series: [
        {
            type: 'parallel',
            lineStyle: {
                width: 3,
                opacity: 0.8
            },
            data: [
                [4, 8, 0.5, 25],
                [8, 16, 1.0, 50],
                [16, 32, 2.0, 110],
                [32, 64, 4.0, 185],
                [12, 24, 1.5, 80]
            ]
        }
    ]
};

Feinabstimmung von Layout und interaktiver Filterung

Durch Hinzufügen von sanften Kurven und Linien-Transparenz werden dichte, sich kreuzende Datenfäden verhindert, die die Benutzeroberfläche überwältigen könnten.

1. Sanfte Kurvenpfade und transparente Fäden

Setzen Sie smooth: trueund verringern Sie die Linien-Transparenz, um hohe Dichte von Datenüberlappungen und Clustern natürlich sichtbar zu machen:

option = {
    parallelAxis: [
        { dim: 0, name: 'Punkt A' },
        { dim: 1, name: 'Punkt B' },
        { dim: 2, name: 'Punkt C' },
        { dim: 3, name: 'Punkt D' },
        { dim: 4, name: 'Punkt E' }
    ],
    parallel: {
        left: '10%',
        right: '10%',
        bottom: '12%',
        top: '12%'
    },
    series: [
        {
            type: 'parallel',
            smooth: true, // Kurven für die Linienpfade zur besseren Darstellung
            lineStyle: {
                color: '#5470c6',
                width: 2,
                opacity: 0.45
            },
            data: [
                [85, 92, 78, 90, 88],
                [70, 65, 80, 72, 75],
                [95, 88, 92, 96, 94],
                [60, 75, 68, 62, 70],
                [88, 90, 85, 89, 91],
                [78, 82, 74, 80, 83]
            ]
        }
    ]
};

Strategische Best Practices

• Richten Sie die Achsen sorgfältig aus:Platzieren Sie stark korrelierte oder direkt vergleichbare Metriken auf benachbarten Achsen, damit Beziehungen und Übergangstrends leichter erkennbar sind.
• Verwenden Sie geringere Transparenz bei hoher Datenmenge: Wenn Dutzende oder Hunderte von Linien gezeichnet werden, verringern Sie lineStyle.opacity auf 0.2–0.5damit sich überlappende Trends natürlicherweise dunklere, hochdichte Bänder bilden.
• Aktivieren Sie smooth: truefür komplexe Datensätze:Durch die subtile Krümmung der Linienpfade werden scharfe visuelle Winkel reduziert, wenn Fäden mehrere parallele Achsen nacheinander kreuzen.