步进图生成器

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

关键信息

分类: 图表与可视化
输入类型: 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

分布式追踪示例

使用 Jaeger、OpenTelemetry 和其他现代可观测性工具的综合分布式追踪示例，适用于微服务架构

preferred input family json

json

常见问题

什么是步进图？

步进图（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]

步进图生成器

关键信息

概览

适用场景

工作原理

使用场景

用户案例

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

2. 仓库库存水平监控

用 Samples 测试

相关专题

相关工具

常见问题

API 文档

请求端点

请求参数

响应格式

AI MCP 文档