SVG 柱状图增强版

SVG 柱状图增强版

输入标签和值生成横向 SVG 柱状图。

输入内容2 项
处理结果14 行
<svg width="640" height="360" viewBox="0 0 640 360" xmlns="http://www.w3.org/2000/svg">
  <text x="28" y="69.5" font-size="14" fill="#334155">一月</text>
  <rect x="120" y="35" width="250.90909090909088" height="59" rx="8" fill="#13c8a1"/>
  <text x="380.9090909090909" y="69.5" font-size="13" fill="#64748b">120</text>
  <text x="28" y="146.5" font-size="14" fill="#334155">二月</text>
  <rect x="120" y="112" width="376.3636363636364" height="59" rx="8" fill="#13c8a1"/>
  <text x="506.3636363636364" y="146.5" font-size="13" fill="#64748b">180</text>
  <text x="28" y="223.5" font-size="14" fill="#334155">三月</text>
  <rect x="120" y="189" width="188.1818181818182" height="59" rx="8" fill="#13c8a1"/>
  <text x="318.1818181818182" y="223.5" font-size="13" fill="#64748b">90</text>
  <text x="28" y="300.5" font-size="14" fill="#334155">四月</text>
  <rect x="120" y="266" width="460" height="59" rx="8" fill="#13c8a1"/>
  <text x="590" y="300.5" font-size="13" fill="#64748b">220</text>
</svg>

SVG 柱状图增强版说明

SVG 柱状图增强版是 CLIS.CC 按常用在线工具使用习惯整理的小工具，适合在浏览器中快速完成数据格式化、编码解码、文本整理、配置转换、单位换算和代码片段生成。工具默认采用左侧输入、右侧输出的一屏结构，常用选项集中在输入区顶部，输入内容后会即时生成结果，不需要额外跳转页面，也不会打断原有编辑流程。

输入标签和值生成横向 SVG 柱状图。在实际使用中，你可以把接口返回、配置文件、URL 参数、文本列表或样式片段直接粘贴到输入区，再根据需要调整处理方式。右侧结果区保持纯文本展示，方便选择、滚动和复制，适合开发调试、运营整理、SEO 文案处理、文档排版和日常办公场景。