SVG 画正负数柱状图

SVG (Scalable Vector Graphics) 是一种基于XML的标准矢量图形格式，常用于创建可缩放的图表，包括柱状图。要在SVG中绘制正负数柱状图，你可以按照以下步骤操作：

1. **结构基础**：
- 创建一个新的SVG文件，并定义基本的`<svg>`标签，包含宽度、高度属性以及视口声明，以便图表自适应屏幕大小。

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="300px" viewBox="0 0 400 300">
</svg>

2. **添加坐标轴**：
- 添加两条垂直的轴线(`<rect>`)，表示X轴，然后设置Y轴的文本标签(`<text>`).

<rect x="50" y="0" width="300" height="25" stroke="#ccc" fill="none"/>
<g transform="translate(50,25)">
  <text dy=".3em">数值</text>
</g>

3. **绘制柱体**：
- 使用循环遍历数据，对于每个数据点，创建一个矩形(`<rect>`)，其位置由值决定，高度代表绝对值。颜色可以区分正负。

<script>
  const data = [/* 正负数数组 */];
</script>
<path d="M0,{{y}} h{{value}}" style={{fill: value > 0 ? 'green' : 'red'}}/>

4. **处理负数**：
- 对于负数，需要将柱体的位置向下移动，可以调整Y轴起点并计算实际高度。

<path d="M0,{{-y + Math.abs(value)}} h{{value}}" style={{fill: value > 0 ? 'green' : 'red'}}/>

5. **完成代码**：
- 将上述代码组合起来，替换掉占位符(`{{...}}`)，并在脚本部分填充数据数组。记得引用外部CSS样式，如果需要的话，还可以添加交互性，如点击事件。

<!-- ... -->
<script>
  const data = [/* ... */];
  // 遍历数据并生成路径
</script>
</svg>