SVG 交互图表

使用 SVG 创建动态、可交互的数据可视化图表。

📊 柱状图 (Bar Chart)

悬停查看数据详情

              <svg width="600" height="300"> <rect class="bar" x="80" y="92.5" width="60"
                height="157.5"/> <!-- 更多柱子... --> </svg>
            

📈 折线图 (Line Chart)

悬停查看数据点

              <polyline points="50,180 150,120 250,160..." fill="none" stroke="var(--primary)"/> <circle
                cx="50" cy="180" r="5"/>
            

🥧 饼图 (Pie Chart)

悬停查看占比

<path d="M 0,0 L 0,-150 A 150,150 0 0,1 106.07,-106.07 Z" fill="#10b981"/>

🍩 环形图 (Donut Chart)

              <!-- 外圆半径 100，内圆半径 60 --> <path d="M 0,-100 A 100,100 0 0,1 70.71,-70.71 L
                42.43,-42.43 A 60,60 0 0,0 0,-60 Z"/>
            

💡 关键知识点

柱状图: 使用 rect 元素，高度根据数据值计算
折线图: 使用 polyline 或 path 绘制连线，circle 标记数据点
饼图: 使用 path 的弧线命令 (A) 绘制扇形
环形图: 在饼图基础上，使用两个弧线创建环形
交互性: 使用 CSS :hover 和 JavaScript 事件实现交互
响应式: 使用 viewBox 实现图表自适应
动画: 可以使用 CSS transition 或 SMIL 动画
数据绑定: 使用 data-* 属性存储数据值