分类

← View All Tools

进度条生成器

从数据生成可自定义的进度条，非常适合显示完成状态、排名或对比数值

进度条数据。支持JSON数组或简单的标签:值文本格式

显示在图表上方的标题

进度条的颜色（逗号分隔的十六进制颜色）。留空使用默认颜色。

水平条的高度或垂直条的宽度（像素）

进度刻度的最大值（留空自动缩放）

进度刻度的最小值

作为参考线显示的目标值

图表容器的背景颜色

在进度条上显示百分比值

在进度条上显示实际数值

加载时动画显示进度条

进度条使用圆角

显示目标值的参考线

关键信息

分类
Data Visualization
输入类型
textarea, text, select, number, color, checkbox
输出类型
html
样本覆盖
4
支持 API
Yes

概览

进度条生成器是一款高效的数据可视化工具，能够将简单的数值或 JSON 数据快速转化为美观、可自定义的进度条图表，非常适合用于展示项目完成度、KPI 达成情况或各项指标的对比分析。

适用场景

  • •需要直观展示项目进度或任务完成百分比时
  • •在报告中对比不同类别的数值大小或排名时
  • •为仪表盘或演示文稿快速制作简洁的状态可视化图表时

工作原理

  • •在“图表数据”区域输入 JSON 格式或标签:数值格式的数据。
  • •根据需求调整方向、条形样式、颜色及高度等外观参数。
  • •勾选显示百分比、数值或目标线，点击生成即可获取可视化进度条。

使用场景

项目管理：实时跟踪团队任务的完成进度。
销售业绩：通过进度条直观展示各销售区域的年度目标达成率。
数据对比：快速对比不同产品的市场占有率或用户满意度评分。

用户案例

1. 项目进度看板

项目经理
背景原因
项目经理需要向客户展示四个核心模块的开发进度，要求简洁明了。
解决问题
需要将复杂的进度数据转化为直观的视觉图表。
如何使用
输入各模块名称及百分比数据，选择“渐变”样式并开启“显示百分比”。
示例配置
chartData: [{"label": "UI设计", "value": 100}, {"label": "后端开发", "value": 75}, {"label": "测试", "value": 40}, {"label": "部署", "value": 10}], barStyle: "gradient", showPercentage: true
效果
生成了一组带有渐变效果的水平进度条，清晰展示了各阶段的完成状态。

2. 年度销售目标达成率

销售总监
背景原因
需要对比三个分公司的年度销售额与既定目标。
解决问题
需要展示当前业绩与目标线的差距。
如何使用
输入销售数据，设置目标值为 1000，并开启“显示目标线”功能。
示例配置
chartData: [{"label": "华东区", "value": 850}, {"label": "华南区", "value": 950}, {"label": "华北区", "value": 600}], targetValue: 1000, showTarget: true, barStyle: "solid"
效果
生成了带有目标参考线的进度条，直观反映了各区域距离年度目标的完成情况。

用 Samples 测试

json, text
PDF示例
2026-02-01 到 2026-02-10 工具生成的PDF示例
preferred input family json
json
ELK Stack 日志分析示例
全面的 ELK Stack（Elasticsearch、Logstash、Kibana）示例，用于分布式系统中的日志聚合、处理和可视化
preferred input family json
json
二维码示例
用于测试二维码读取和生成工具的示例二维码图像
preferred input family json
json
十六进制/Unicode转换样本
十六进制和Unicode转义序列转换的测试样本
preferred input family json
json

相关专题

JsonConvert工具专题
探索 100 个围绕 json 的 convert 工作流工具，快速找到相近能力。
TextConvert工具专题
探索 80 个围绕 text 的 convert 工作流工具，快速找到相近能力。
Json 工具专题
探索 43 个围绕 json 的 utility 工作流工具，快速找到相近能力。
Text 工具专题
探索 33 个围绕 text 的 utility 工作流工具，快速找到相近能力。

常见问题

支持哪些数据输入格式？

支持 JSON 数组格式（如 [{'label': 'A', 'value': 50}]）或简单的文本格式（如 A:50）。

可以自定义进度条的颜色吗？

可以，您可以在“条形颜色”选项中输入逗号分隔的十六进制颜色代码。

如何显示目标参考线？

在“目标值”中输入数值，并勾选“显示目标线”选项即可在图表中呈现参考位置。

进度条支持动画效果吗？

支持，勾选“动画进度”选项后，图表在加载时会呈现平滑的增长动画。

生成的图表可以调整方向吗？

可以，通过“方向”选项，您可以选择水平或垂直布局以适应不同的页面空间。

API 文档

请求端点

POST /zh/api/tools/progress-bar-generator

请求参数

参数名 类型 必填 描述
chartData textarea 是 进度条数据。支持JSON数组或简单的标签:值文本格式
chartTitle text 否 显示在图表上方的标题
orientation select 否 -
barStyle select 否 -
barColors text 否 进度条的颜色（逗号分隔的十六进制颜色）。留空使用默认颜色。
barHeight number 否 水平条的高度或垂直条的宽度（像素）
maxValue number 否 进度刻度的最大值（留空自动缩放）
minValue number 否 进度刻度的最小值
targetValue number 否 作为参考线显示的目标值
backgroundColor color 否 图表容器的背景颜色
showPercentage checkbox 否 在进度条上显示百分比值
showValues checkbox 否 在进度条上显示实际数值
animated checkbox 否 加载时动画显示进度条
rounded checkbox 否 进度条使用圆角
showTarget checkbox 否 显示目标值的参考线

响应格式

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

AI MCP 文档

将此工具添加到您的 MCP 服务器配置中： 

{
  "mcpServers": {
    "elysiatools-progress-bar-generator": {
      "name": "progress-bar-generator",
      "description": "从数据生成可自定义的进度条，非常适合显示完成状态、排名或对比数值",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=progress-bar-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

你可以串联多个工具，比如：`https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`，最多20个。

如果遇见问题，请联系我们：[email protected]