Elysia Tools
导航
Data Visualization
从数据生成可自定义的进度条，非常适合显示完成状态、排名或对比数值
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
进度条生成器是一款高效的数据可视化工具，能够将简单的数值或 JSON 数据快速转化为美观、可自定义的进度条图表，非常适合用于展示项目完成度、KPI 达成情况或各项指标的对比分析。
背景
项目经理需要向客户展示四个核心模块的开发进度，要求简洁明了。
问题
需要将复杂的进度数据转化为直观的视觉图表。
如何使用
输入各模块名称及百分比数据，选择“渐变”样式并开启“显示百分比”。
chartData: [{"label": "UI设计", "value": 100}, {"label": "后端开发", "value": 75}, {"label": "测试", "value": 40}, {"label": "部署", "value": 10}], barStyle: "gradient", showPercentage: true结果
生成了一组带有渐变效果的水平进度条，清晰展示了各阶段的完成状态。
背景
需要对比三个分公司的年度销售额与既定目标。
问题
需要展示当前业绩与目标线的差距。
如何使用
输入销售数据，设置目标值为 1000，并开启“显示目标线”功能。
chartData: [{"label": "华东区", "value": 850}, {"label": "华南区", "value": 950}, {"label": "华北区", "value": 600}], targetValue: 1000, showTarget: true, barStyle: "solid"结果
生成了带有目标参考线的进度条，直观反映了各区域距离年度目标的完成情况。
支持 JSON 数组格式（如 [{'label': 'A', 'value': 50}]）或简单的文本格式（如 A:50）。
可以，您可以在“条形颜色”选项中输入逗号分隔的十六进制颜色代码。
在“目标值”中输入数值，并勾选“显示目标线”选项即可在图表中呈现参考位置。
支持，勾选“动画进度”选项后，图表在加载时会呈现平滑的增长动画。
可以，通过“方向”选项，您可以选择水平或垂直布局以适应不同的页面空间。