如何使用 SVG 创建图表 - 面试题

SVG 图表是数据可视化的重要工具，可以创建各种类型的图表。以下是使用 SVG 创建图表的方法：

1. 柱状图 使用 <rect> 元素创建柱状图。

svg
<svg width="400" height="300" viewBox="0 0 400 300">
  <!-- 坐标轴 -->
  <line x1="50" y1="250" x2="380" y2="250" stroke="black" stroke-width="2" />
  <line x1="50" y1="50" x2="50" y2="250" stroke="black" stroke-width="2" />
  
  <!-- 柱子 -->
  <rect x="70" y="100" width="40" height="150" fill="#3498db" />
  <rect x="130" y="80" width="40" height="170" fill="#e74c3c" />
  <rect x="190" y="120" width="40" height="130" fill="#2ecc71" />
  <rect x="250" y="60" width="40" height="190" fill="#f39c12" />
  <rect x="310" y="90" width="40" height="160" fill="#9b59b6" />
  
  <!-- 标签 -->
  <text x="90" y="270" text-anchor="middle" font-size="12">Q1</text>
  <text x="150" y="270" text-anchor="middle" font-size="12">Q2</text>
  <text x="210" y="270" text-anchor="middle" font-size="12">Q3</text>
  <text x="270" y="270" text-anchor="middle" font-size="12">Q4</text>
  <text x="330" y="270" text-anchor="middle" font-size="12">Q5</text>
</svg>

2. 折线图 使用 <polyline> 或 <path> 元素创建折线图。

svg
<svg width="400" height="300" viewBox="0 0 400 300">
  <!-- 坐标轴 -->
  <line x1="50" y1="250" x2="380" y2="250" stroke="black" stroke-width="2" />
  <line x1="50" y1="50" x2="50" y2="250" stroke="black" stroke-width="2" />
  
  <!-- 网格线 -->
  <line x1="50" y1="200" x2="380" y2="200" stroke="gray" stroke-dasharray="5,5" />
  <line x1="50" y1="150" x2="380" y2="150" stroke="gray" stroke-dasharray="5,5" />
  <line x1="50" y1="100" x2="380" y2="100" stroke="gray" stroke-dasharray="5,5" />
  
  <!-- 折线 -->
  <polyline points="70,200 130,150 190,180 250,100 310,120" 
            fill="none" stroke="#3498db" stroke-width="3" />
  
  <!-- 数据点 -->
  <circle cx="70" cy="200" r="5" fill="#3498db" />
  <circle cx="130" cy="150" r="5" fill="#3498db" />
  <circle cx="190" cy="180" r="5" fill="#3498db" />
  <circle cx="250" cy="100" r="5" fill="#3498db" />
  <circle cx="310" cy="120" r="5" fill="#3498db" />
</svg>

3. 饼图 使用 <path> 元素创建饼图。

svg
<svg width="300" height="300" viewBox="0 0 300 300">
  <g transform="translate(150, 150)">
    <!-- 扇形 1: 30% -->
    <path d="M 0 0 L 0 -100 A 100 100 0 0 1 95.1 -30.9 Z" 
          fill="#3498db" />
    
    <!-- 扇形 2: 25% -->
    <path d="M 0 0 L 95.1 -30.9 A 100 100 0 0 1 58.8 80.9 Z" 
          fill="#e74c3c" />
    
    <!-- 扇形 3: 20% -->
    <path d="M 0 0 L 58.8 80.9 A 100 100 0 0 1 -58.8 80.9 Z" 
          fill="#2ecc71" />
    
    <!-- 扇形 4: 15% -->
    <path d="M 0 0 L -58.8 80.9 A 100 100 0 0 1 -95.1 -30.9 Z" 
          fill="#f39c12" />
    
    <!-- 扇形 5: 10% -->
    <path d="M 0 0 L -95.1 -30.9 A 100 100 0 0 1 0 -100 Z" 
          fill="#9b59b6" />
  </g>
</svg>

4. 散点图 使用 <circle> 元素创建散点图。

svg
<svg width="400" height="300" viewBox="0 0 400 300">
  <!-- 坐标轴 -->
  <line x1="50" y1="250" x2="380" y2="250" stroke="black" stroke-width="2" />
  <line x1="50" y1="50" x2="50" y2="250" stroke="black" stroke-width="2" />
  
  <!-- 数据点 -->
  <circle cx="80" cy="200" r="5" fill="#3498db" />
  <circle cx="120" cy="150" r="5" fill="#3498db" />
  <circle cx="160" cy="180" r="5" fill="#3498db" />
  <circle cx="200" cy="100" r="5" fill="#3498db" />
  <circle cx="240" cy="120" r="5" fill="#3498db" />
  <circle cx="280" cy="80" r="5" fill="#3498db" />
  <circle cx="320" cy="140" r="5" fill="#3498db" />
  <circle cx="360" cy="60" r="5" fill="#3498db" />
</svg>

5. 面积图 使用 <path> 元素创建面积图。

svg
<svg width="400" height="300" viewBox="0 0 400 300">
  <!-- 坐标轴 -->
  <line x1="50" y1="250" x2="380" y2="250" stroke="black" stroke-width="2" />
  <line x1="50" y1="50" x2="50" y2="250" stroke="black" stroke-width="2" />
  
  <!-- 面积 -->
  <path d="M 70 200 L 130 150 L 190 180 L 250 100 L 310 120 L 310 250 L 70 250 Z" 
        fill="#3498db" opacity="0.5" />
  
  <!-- 折线 -->
  <polyline points="70,200 130,150 190,180 250,100 310,120" 
            fill="none" stroke="#3498db" stroke-width="3" />
</svg>

6. 动态图表 使用 JavaScript 创建动态图表。

javascript
function createBarChart(data, containerId) {
  const svgNS = 'http://www.w3.org/2000/svg';
  const container = document.getElementById(containerId);
  const svg = document.createElementNS(svgNS, 'svg');
  svg.setAttribute('width', '400');
  svg.setAttribute('height', '300');
  svg.setAttribute('viewBox', '0 0 400 300');
  
  const maxValue = Math.max(...data);
  const barWidth = 40;
  const gap = 20;
  const startX = 50;
  const startY = 250;
  
  data.forEach((value, index) => {
    const height = (value / maxValue) * 200;
    const x = startX + index * (barWidth + gap);
    const y = startY - height;
    
    const rect = document.createElementNS(svgNS, 'rect');
    rect.setAttribute('x', x);
    rect.setAttribute('y', y);
    rect.setAttribute('width', barWidth);
    rect.setAttribute('height', height);
    rect.setAttribute('fill', `hsl(${index * 60}, 70%, 50%)`);
    
    svg.appendChild(rect);
  });
  
  container.appendChild(svg);
}

// 使用示例
const data = [100, 150, 120, 180, 90];
createBarChart(data, 'chart-container');

最佳实践：

使用 viewBox 实现响应式图表
添加适当的标签和图例
使用颜色区分不同数据系列
考虑添加交互效果（hover、tooltip）
优化性能，避免过多元素
为图表添加可访问性支持
使用 CSS 动画增强视觉效果