分类

← View All Tools

步进图生成器

创建阶梯式数据可视化图表，完美展示离散数据随时间的变化

JSON数组格式的数据点，包含x、y和可选标签属性

显示在步进图上方的标题

X轴的标签

Y轴的标签

步进线的颜色

步进线的像素宽度

数据点的颜色

数据点的像素大小

在步进线上显示数据点

在数据点上显示数值标签

显示背景网格线

用颜色填充步进线下方的区域

区域填充的颜色（如果启用）

网格线的颜色

图表的背景颜色

图表的像素宽度

图表的像素高度

标签和文本的字体大小

图表标题的字体大小

文本元素的字体族

加载时动画显示图表

动画持续时间（毫秒）

关键信息

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

概览

步进图生成器是一款专业的数据可视化工具，旨在帮助用户将离散的时间序列数据转换为清晰的阶梯式图表，非常适合直观展示价格波动、库存水平变化或分阶段的业务指标。

适用场景

  • •需要展示价格、利率等在特定时间点发生跳跃式变化的数据时。
  • •需要可视化库存水平或资源分配随时间推移的离散变动情况时。
  • •需要对比不同阶段的业务指标，并强调数值在特定区间内保持稳定的趋势时。

工作原理

  • •输入 JSON 格式的数据点，包含 x 轴坐标、y 轴数值及可选的标签信息。
  • •选择阶梯样式（前置、后置或居中），并根据需求调整线条颜色、宽度及数据点样式。
  • •配置图表标题、轴标签及网格显示，点击生成即可获得直观的阶梯式可视化图表。

使用场景

金融分析：展示股票价格或利率在不同交易日的变动轨迹。
库存管理：实时监控仓库库存水平随出入库操作的阶梯式变化。
项目进度：记录项目在不同阶段的资源投入或完成度指标。

用户案例

1. 年度产品价格变动趋势

电商运营
背景原因
运营人员需要向管理层展示某核心产品在过去一年内的价格调整记录，以分析价格变动对销量的影响。
解决问题
普通折线图无法准确体现价格在特定日期调整后的持续状态，需要使用阶梯图展示价格的离散变动。
如何使用
在数据点输入框中填入日期与价格数据，选择“阶梯前置”样式，并开启数据标签显示。
示例配置
[{"x": "1月", "y": 299}, {"x": "4月", "y": 359}, {"x": "8月", "y": 329}, {"x": "12月", "y": 299}]
效果
生成了一张清晰的阶梯图，直观展示了产品价格在各时间段的稳定区间及调整节点。

2. 仓库库存水平监控

仓储管理员
背景原因
管理员需要记录仓库中某关键物料的库存水位，以便在库存过低时及时补货。
解决问题
库存数据是离散的，需要通过可视化图表清晰展示每次入库或出库后的库存水平变化。
如何使用
输入库存变动数据，设置“填充线下区域”以增强视觉对比度，并调整线条颜色为绿色。
示例配置
{"stepStyle": "step-after", "fillArea": true, "lineColor": "#10b981"}
效果
通过填充区域的阶梯图，管理员可以一眼识别出库存水位下降的趋势及当前的库存状态。

用 Samples 测试

json, text
WebRTC 实时通信示例
全面的 WebRTC 示例，用于点对点音视频通信、数据通道、屏幕共享和信令服务器实现
preferred input family json
json
PDF示例
2026-02-01 到 2026-02-10 工具生成的PDF示例
preferred input family json
json
Grafana 高级应用示例
全面的 Grafana 示例，涵盖高级仪表板设计、告警配置、数据源集成和插件开发
preferred input family json
json
JWT 示例
从基础令牌结构到高级安全实现的全面JWT示例
preferred input family json
json

相关专题

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

常见问题

什么是步进图？

步进图（Step Chart）是一种通过水平和垂直线条连接数据点的图表，用于展示数值在特定时间点发生的离散变化，而非平滑的趋势。

支持哪些阶梯样式？

支持三种样式：阶梯前置（先水平后垂直）、阶梯后置（先垂直后水平）以及阶梯居中（中心阶梯）。

如何输入数据？

请使用 JSON 数组格式输入数据，例如：[{"x": "1月", "y": 100}, {"x": "2月", "y": 150}]。

可以自定义图表外观吗？

可以，您可以自定义线条颜色、宽度、数据点大小、背景颜色以及是否填充线下区域。

生成的图表支持导出吗？

本工具生成 HTML 格式的交互式图表，您可以直接在网页中查看或通过截图保存。

API 文档

请求端点

POST /zh/api/tools/step-chart-generator

请求参数

参数名 类型 必填 描述
chartTitle text 否 显示在步进图上方的标题
dataPoints textarea 是 JSON数组格式的数据点，包含x、y和可选标签属性
xAxisLabel text 否 X轴的标签
yAxisLabel text 否 Y轴的标签
stepStyle select 是 -
lineColor color 否 步进线的颜色
lineWidth number 否 步进线的像素宽度
pointColor color 否 数据点的颜色
pointSize number 否 数据点的像素大小
showDataPoints checkbox 否 在步进线上显示数据点
showLabels checkbox 否 在数据点上显示数值标签
showGrid checkbox 否 显示背景网格线
fillArea checkbox 否 用颜色填充步进线下方的区域
areaColor color 否 区域填充的颜色（如果启用）
gridColor color 否 网格线的颜色
backgroundColor color 否 图表的背景颜色
chartWidth number 否 图表的像素宽度
chartHeight number 否 图表的像素高度
dataLabelFormat select 否 -
fontSize number 否 标签和文本的字体大小
titleSize number 否 图表标题的字体大小
fontFamily text 否 文本元素的字体族
animationEnabled checkbox 否 加载时动画显示图表
animationDuration number 否 动画持续时间（毫秒）

响应格式

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

AI MCP 文档

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

{
  "mcpServers": {
    "elysiatools-step-chart-generator": {
      "name": "step-chart-generator",
      "description": "创建阶梯式数据可视化图表，完美展示离散数据随时间的变化",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=step-chart-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]