Wykres równoległy: analiza danych wielowymiarowych

Podczas porównywania punktów danych wielowymiarowych na wielu osiach liczbowych lub kategorycznych jednocześnie, Wykres współrzędnych równoległych jest niezbędnym narzędziem wizualnym. Zamiast mapowania współrzędnych na prostopadłe osie poziome i pionowe, wykresy równoległe umieszczają wszystkie wymiary obok siebie jako równoległe linie. Poszczególne wpisy danych są przedstawiane jako ciągłe linie łamane przecinające każdą oś, co ułatwia identyfikację klastery wieloatrybutowe, kompromisy, korelacje i wartości odstające—na przykład porównanie modeli samochodów pod kątem mocy silnika, wagi, zużycia paliwa, ceny i oceny bezpieczeństwa.

Zasada działania wykresów równoległych

W Apache ECharts wykresy współrzędnych równoległych opierają się na dedykowanym bloku konfiguracyjnym parallelAxis bloku konfiguracyjnym, który definiuje każdą skalę równoległą (indeks osi, nazwę wymiaru i typ danych). Seria wykresu ustawia type: 'parallel' i mapuje wiersze tablic wartości wieloelementowych na każdy odpowiadający indeks osi.

1. Podstawowa konfiguracja

Aby stworzyć podstawowy wykres równoległy, zdefiniuj wymiary w tablicy parallelAxis i przekaż odpowiadające tablice współrzędnych wewnątrz serii data:

option = {
    parallelAxis: [
        { dim: 0, name: 'Cena ($)' },
        { dim: 1, name: 'Ocena' },
        { dim: 2, name: 'Waga (kg)' },
        { dim: 3, name: 'Moc (KM)' }
    ],
    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]
            ]
        }
    ]
};

Zaawansowane techniki strukturalne

Wykresy równoległe mogą być łączone z gradientami kolorów wizualnymi lub mieszanymi skalami kategorycznymi w celu oceny skomplikowanych kompromisów między różnymi kategoriami produktów.

1. Gradienty kolorów mapy wizualnej na przestrzeni wymiarów

Połącz komponent visualMap z kluczowym wymiarem osi (na przykład mapowanie koloru linii na oceny wydajności), aby natychmiast wyróżnić najlepszych wykonawców na wszystkich osiach równoległych:

option = {
    osiecioweOsi: [
        { dim: 0, name: 'Liczba rdzeni CPU' },
        { dim: 1, name: 'RAM (GB)' },
        { dim: 2, name: 'Pamięć (TB)' },
        { dim: 3, name: 'Miesięczne koszty ($)', min: 0, max: 200 }
    ],
    mapaWizualna: {
        pokazuj: true,
        typ: 'ciągły',
        min: 0,
        max: 200,
        wymiar: 3, // Kolorowanie ścieżek linii na podstawie indeksu wymiaru 3 (Miesięczne koszty)
        wZakresie: {
            kolor: ['#91cc75', '#fac858', '#ee6666'] // Zielony (niskie koszty) do czerwonego (wysokie koszty)
        },
        orientacja: 'pozioma',
        górna: '2%',
        lewa: 'środek'
    },
    osieRównoległe: {
        górna: '18%',
        dolna: '10%'
    },
    serie: [
        {
            typ: 'osieRównoległe',
            stylLinii: {
                szerokość: 3,
                przezroczystość: 0.8
            },
            dane: [
                [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]
            ]
        }
    ]
};

Dostosowanie układu i filtrowanie interaktywne

Dodanie wygładzonych krzywych i przezroczystości linii zapobiega przesyceniu interfejsu użytkownika przez gęste, krzyżujące się wątki danych.

1. Wygładzone ścieżki krzywych i niewyraźne wątki

Ustaw smooth: truei zmniejsz przezroczystość linii, aby nadpisywanie danych o wysokiej gęstości i skupiska były naturalnie widoczne:

option = {
    osieRównoległe: [
        { dim: 0, name: 'Wynik A' },
        { dim: 1, name: 'Wynik B' },
        { dim: 2, name: 'Wynik C' },
        { dim: 3, name: 'Wynik D' },
        { dim: 4, name: 'Wynik E' }
    ],
    osieRównoległe: {
        lewa: '10%',
        prawa: '10%',
        dolna: '12%',
        górna: '12%'
    },
    serie: [
        {
            typ: 'osieRównoległe',
            smooth: true, // Wygładzone ścieżki linii dla lepszej wizualizacji
            stylLinii: {
                kolor: '#5470c6',
                szerokość: 2,
                przezroczystość: 0.45
            },
            dane: [
                [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]
            ]
        }
    ]
};

Strategiczne najlepsze praktyki

• Rozmieść osie rozważnie: Umieść silnie skorelowane lub bezpośrednio porównywalne metryki na sąsiednich osiach, aby łatwiej było zauważyć zależności i trendy przekrywające się.
• Użyj niższej przezroczystości przy dużych objętościach danych: Gdy rysujesz dziesiątki lub setki linii, zmniejsz przezroczystościLinii do 0.2–0.5 aby nakładające się trendy tworzyły naturalnie ciemniejsze, gęste pasma.
• Włącz smooth: true dla złożonych zestawów danych: Zastosowanie delikatnego wygięcia ścieżek linii zmniejsza ostre kąty wizualne, gdy wątki przecinają wiele osi równoległych w szybkim szyku.