# 步进图生成器

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

> 标准页面: https://elysiatools.com/zh/tools/step-chart-generator

- **分类:** Data Visualization

- **关键词:** 步进图, 阶梯图, 离散数据, 时间序列, 价格变化, 库存水平, 阶段数据

## 概述

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

## 输入项

- **图表标题** (text): 显示在步进图上方的标题
- **数据点** (textarea): JSON数组格式的数据点，包含x、y和可选标签属性
- **X轴标签** (text): X轴的标签
- **Y轴标签** (text): Y轴的标签
- **阶梯样式** (select): 选择阶梯样式
- **线条颜色** (color): 步进线的颜色
- **线条宽度** (number): 步进线的像素宽度
- **数据点颜色** (color): 数据点的颜色
- **数据点大小** (number): 数据点的像素大小
- **显示数据点** (checkbox): 在步进线上显示数据点
- **显示数据标签** (checkbox): 在数据点上显示数值标签
- **显示网格** (checkbox): 显示背景网格线
- **填充线下区域** (checkbox): 用颜色填充步进线下方的区域
- **区域填充颜色** (color): 区域填充的颜色（如果启用）
- **网格颜色** (color): 网格线的颜色
- **背景颜色** (color): 图表的背景颜色
- **图表宽度** (number): 图表的像素宽度
- **图表高度** (number): 图表的像素高度
- **数据标签格式** (select): 选择格式
- **字体大小** (number): 标签和文本的字体大小
- **标题字体大小** (number): 图表标题的字体大小
- **字体系列** (text): 文本元素的字体族
- **启用动画** (checkbox): 加载时动画显示图表
- **动画时长** (number): 动画持续时间（毫秒）

## 适用场景

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

## 工作原理

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

## 使用案例

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

## 常见问题

### 什么是步进图？

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

### 支持哪些阶梯样式？

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

### 如何输入数据？

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

### 可以自定义图表外观吗？

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

### 生成的图表支持导出吗？

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

## 相关工具

- [对比条形图生成器](https://elysiatools.com/zh/tools/comparison-bar-chart): 生成背对背条形图，用于正负值对比展示，非常适合数据集对比分析
- [环形图生成器](https://elysiatools.com/zh/tools/donut-chart-generator): 从数据生成可自定义的环形图（甜甜圈图），具有中央空间，非常适合显示比例数据
- [漏斗图生成器](https://elysiatools.com/zh/tools/funnel-chart-generator): 从数据生成可自定义的漏斗图，非常适合显示转化率、销售管道和流程
- [甘特图生成器](https://elysiatools.com/zh/tools/gantt-chart-generator): 创建专业甘特图，支持任务时间线、依赖关系、进度跟踪和里程碑标记
- [里程碑图生成器](https://elysiatools.com/zh/tools/milestone-chart): 生成项目里程碑图表，包含时间线节点和关键成就点
- [多层饼图生成器](https://elysiatools.com/zh/tools/multi-level-pie-chart-generator): 创建同心圆多层饼图，支持层级关系显示和交互式钻取功能
- [象形图生成器](https://elysiatools.com/zh/tools/pictograph-generator): 使用图标/符号创建象形图来表示数量，支持自定义图标、颜色和布局
- [进度条生成器](https://elysiatools.com/zh/tools/progress-bar-generator): 从数据生成可自定义的进度条，非常适合显示完成状态、排名或对比数值

## 示例

- [Grafana 高级应用示例](https://elysiatools.com/zh/samples/grafana-samples): 全面的 Grafana 示例，涵盖高级仪表板设计、告警配置、数据源集成和插件开发
- [WebRTC 实时通信示例](https://elysiatools.com/zh/samples/webrtc-samples): 全面的 WebRTC 示例，用于点对点音视频通信、数据通道、屏幕共享和信令服务器实现
- [二维码示例](https://elysiatools.com/zh/samples/qrcode-samples): 用于测试二维码读取和生成工具的示例二维码图像
- [分布式追踪示例](https://elysiatools.com/zh/samples/distributed-tracing-samples): 使用 Jaeger、OpenTelemetry 和其他现代可观测性工具的综合分布式追踪示例，适用于微服务架构