> For the complete documentation index, see [llms.txt](https://reee-visual.gitbook.io/ray-design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://reee-visual.gitbook.io/ray-design/jie-ti-zhe-xian-tu.md).

# 阶梯折线图

阶梯折线图（Step Line Chart）又称步骤图，是一种类似于折线图的图表，在线条和数据点之间形成一系列阶梯。当显示不规则间隔发生更改时，阶梯式折线图非常有用。 

例如，奶制品、汽油、税率、利率等的价格上涨。

### 一、阶梯折线图图解

![](/files/YrkFm3hGxOA18nLoQc8l)

### 二、基本属性

![](/files/orkbKcbGMBgV7XQ9D0yV)

### 三、数据结构

在笛卡尔坐标系中，至少两个数据点通过水平/垂直连线形成阶梯折线图。X轴用于连续时间或有序类别，Y轴用于连续时间或有序类别的数据。

![](/files/IvJk4IIExhmxUurSNeyN)

### 四、适用场景

与折线图类似，主要适用于随时间或有序类别变化而变化的数据组。但与折线图不同的是，阶梯折线图是一种以无规律、间歇型阶跃方式表达数值的变化，用于不连续特定事件的趋势。 

与折线图相比，它不使用最短距离来连接两个数据点；相反，它使用垂直和水平线将数据点连接成一个系列，以形成阶梯状的进展。 

从本质上讲，从折线图的总体斜率来看，趋势非常明显。然而，当特定数据点段的线条呈现扭曲形状时，确定趋势变得非常困难。这就是阶梯折线图的重要性所在。对于一组确定的数据，折线图显示数据点的一般偏差，阶梯折线图不仅使您能够比较在同一系列的不同点，同时还能辨别趋势的间歇模式。 

阶梯折线图的拐点方式有以下三种：

![](/files/Or9EosmyC08DDqoIo113)

![](/files/vL3XrVFj7dBWuQkllqbX)

![](/files/iKdl65l6LEN6i8bszcjU)

如下图为某款女装价格浮动的阶梯折线图：

![](/files/aXCyoNzW7VOw0TGOIlLk)

图中可清晰的了解到最近半年价格降幅最大的为2021-05-01日当天，前一天还是原价238元。 

若使用折线图就会从03月08日以斜线的形式连接至05月01日，展现的信息就是价格从03月08日就开始缓慢降价。可能会让人误以为，这种变化是线性且连贯的。所以这种情况不适合使用折线图表示了，使用阶梯图表就可以避免这种可能的错误理解。

### 五、不适用场景

这里还是要分清楚阶梯折线图与折线图的区别，两个相邻数值随时间实时变化的情况不适用。

### 六、阶梯图图史

关于阶梯图图史的信息几乎没有记录。下面是一些阶梯图的使用场景欣赏示例：

![来源：www.feltron.com](/files/fStH1DHwGIQsCuZ0qGlR)

![来源：www.visualoop.com](/files/9xcFpVDmyTaKoYbOfEwm)

![来源：www.nytimes.com](/files/nA3MU1y3i5g6MjEMu7Ax)

### 七、设计开眼

以下为具有代表性的设计案例，更多案例持续添加中。

![2010——2015年房屋租赁价格价格的趋势](/files/HEGclUdjNESGyRXmJf2c) ![《意大利日报》中阶梯折线图的运用](/files/Ix6zsCLtMB85PRe1RDQZ)

### 八、更多学习资源

[1、阶梯图简介。](https://www.grapecity.com.cn/docs/componentonestudio/c1wpfchart2d/Step%20Chart.html)