Biểu đồ Song song: Phân tích dữ liệu đa chiều

Khi so sánh các điểm dữ liệu đa biến trên nhiều trục số học hoặc phân loại cùng lúc, thìBiểu đồ Tọa độ Song songlà một công cụ trực quan thiết yếu. Thay vì ánh xạ tọa độ lên các trục ngang và dọc vuông góc, các biểu đồ song song sắp xếp tất cả các chiều cạnh nhau như những đường song song. Các mục dữ liệu riêng lẻ được biểu diễn dưới dạng các đường polyline liên tục cắt ngang mỗi trục, giúp dễ dàng nhận diệnnhóm dữ liệu đa thuộc tính, các thỏa hiệp, tương quan và các điểm ngoại lệ—ví dụ như so sánh các mẫu xe theo công suất, trọng lượng, hiệu suất nhiên liệu, giá cả và điểm an toàn.

Cơ chế của Biểu đồ Song song

Trong Apache ECharts, các biểu đồ tọa độ song song dựa vào một khối cấu hình chuyên dụngparallelAxiskhối cấu hình xác định mỗi thang đo song song (chỉ số trục, tên chiều và kiểu dữ liệu). Chuỗi biểu đồ thiết lậptype: 'parallel'và ánh xạ các hàng của mảng giá trị nhiều phần tử vào mỗi chỉ số trục tương ứng.

1. Cài đặt cơ bản

Để xây dựng một biểu đồ song song cơ bản, hãy xác định các chiều của bạn trong mảngparallelAxisvà truyền các mảng tọa độ tương ứng bên trong phần seriesdata:

option = {
    parallelAxis: [
        { dim: 0, name: 'Giá ($)' },
        { dim: 1, name: 'Xếp hạng' },
        { dim: 2, name: 'Khối lượng (kg)' },
        { dim: 3, name: 'Công suất (HP)' }
    ],
    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]
            ]
        }
    ]
};

Các kỹ thuật cấu trúc nâng cao

Các biểu đồ song song có thể kết hợp với các dải màu trực quan hoặc các thang đo phân loại hỗn hợp để đánh giá các thỏa hiệp phức tạp giữa các danh mục sản phẩm khác nhau.

1. Dải màu chuyển độ trực quan trên các chiều

Kết hợp mộtvisualMapthành phần với một chiều trục chính (ví dụ: ánh xạ màu đường nét theo xếp hạng hiệu suất) để ngay lập tức làm nổi bật các đối tượng hàng đầu trên tất cả các trục song song:

option = {
    parallelAxis: [
        { dim: 0, name: 'Lõi CPU' },
        { dim: 1, name: 'RAM (GB)' },
        { dim: 2, name: 'Lưu trữ (TB)' },
        { dim: 3, name: 'Chi phí hàng tháng ($)', min: 0, max: 200 }
    ],
    visualMap: {
        show: true,
        type: 'liên tục',
        min: 0,
        max: 200,
        dimension: 3, // Màu đường đi của đường thẳng dựa trên chỉ số chiều 3 (Chi phí hàng tháng)
        inRange: {
            color: ['#91cc75', '#fac858', '#ee6666'] // Xanh lá (Chi phí thấp) đến Đỏ (Chi phí cao)
        },
        orient: 'ngang',
        top: '2%',
        left: 'giữa'
    },
    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]
            ]
        }
    ]
};

Tinh chỉnh bố cục và lọc tương tác

Việc thêm các đường cong mượt mà và độ trong suốt của đường thẳng giúp ngăn các luồng dữ liệu dày đặc, chéo nhau làm quá tải giao diện người dùng.

1. Các đường đi cong mượt và các luồng có độ trong suốt thấp

Thiết lập smooth: truevà giảm độ trong suốt của đường thẳng để các vùng chồng chéo và tập trung dữ liệu dày đặc hiển thị một cách tự nhiên:

option = {
    parallelAxis: [
        { dim: 0, name: 'Điểm A' },
        { dim: 1, name: 'Điểm B' },
        { dim: 2, name: 'Điểm C' },
        { dim: 3, name: 'Điểm D' },
        { dim: 4, name: 'Điểm E' }
    ],
    parallel: {
        left: '10%',
        right: '10%',
        bottom: '12%',
        top: '12%'
    },
    series: [
        {
            type: 'parallel',
            smooth: true, // Đường cong các đường đi để hình ảnh rõ ràng hơn
            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]
            ]
        }
    ]
};

Các thực hành tốt chiến lược

• Sắp xếp các trục một cách cẩn trọng:Đặt các chỉ số có mối tương quan mạnh hoặc có thể so sánh trực tiếp trên các trục kề nhau để dễ dàng nhận diện mối quan hệ và xu hướng giao thoa.
• Sử dụng độ trong suốt thấp cho dữ liệu có khối lượng lớn:Khi vẽ hàng chục hoặc hàng trăm đường thẳng, giảm lineStyle.opacity xuống 0.2–0.5để các xu hướng chồng chéo tạo thành các dải đậm, tập trung cao một cách tự nhiên.
• Kích hoạt smooth: truecho các tập dữ liệu phức tạp:Áp dụng độ cong nhẹ nhàng cho các đường đi của đường thẳng sẽ giảm các góc nhìn sắc nét khi các luồng dữ liệu đi qua nhiều trục song song liên tiếp.