css雷达图

CSS雷达图基础概念

CSS雷达图是一种使用CSS绘制的数据可视化图表，用于展示多个变量之间的关系。它类似于蜘蛛网图，通常用于比较多个对象在多个维度上的表现。

类型

静态雷达图：固定数据，不可交互。
动态雷达图：可以通过JavaScript动态更新数据，支持用户交互。

应用场景

性能评估：比较不同产品在多个性能指标上的表现。
用户反馈分析：展示用户在多个方面的满意度。
市场调研：比较不同品牌在不同特性上的表现。

示例代码

以下是一个简单的静态CSS雷达图示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Radar Chart</title>
    <style>
        .radar-chart {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 50px auto;
        }
        .axis {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
        .axis-line {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #000;
        }
        .axis-text {
            position: absolute;
            top: 50%;
            transform: translate(-50%, -100%);
            font-size: 12px;
            text-align: center;
        }
        .area {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
        }
        .area:nth-child(1) { background-color: red; }
        .area:nth-child(2) { background-color: blue; }
        .area:nth-child(3) { background-color: green; }
        .area:nth-child(4) { background-color: yellow; }
        .area:nth-child(5) { background-color: purple; }
    </style>
</head>
<body>
    <div class="radar-chart">
        <div class="axis">
            <div class="axis-line"></div>
            <div class="axis-text">A</div>
        </div>
        <div class="axis">
            <div class="axis-line"></div>
            <div class="axis-text">B</div>
        </div>
        <div class="axis">
            <div class="axis-line"></div>
            <div class="axis-text">C</div>
        </div>
        <div class="axis">
            <div class="axis-line"></div>
            <div class="axis-text">D</div>
        </div>
        <div class="axis">
            <div class="axis-line"></div>
            <div class="axis-text">E</div>
        </div>
        <div class="area"></div>
        <div class="area"></div>
        <div class="area"></div>
        <div class="area"></div>
        <div class="area"></div>
    </div>
</body>
</html>