> 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/zhe-xian-tu-qu-xian-tu.md).

# 折线图/曲线图

折线图（line chart）或曲线图（curve chart）是由许多的数据点用直线连接形成的统计图表。 

折线图用于分析事物随时间或有序类别而变化的趋势。如果有多组数据，则用于分析多组数据随时间变化或有序类别的相互作用和影响。

折线的方向表示正/负变化。折线的斜率表示变化的程度。

### 一、折线图图解

![](/files/-MkkDcoCSZ4Hd9DHWzhp)

### 二、基本属性

![](/files/-MkkDmNiv8PJjt620Y2m)

### 三、数据结构

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

![](/files/-MkkEAAWorVFsmYx_D6r)

### 四、适用场景

#### 4.1 同一变量随时间或有序类别变化而变化的数据组。

![](/files/-MkkEXwbnuIi4tUZsdxs)

#### 4.2 多组变量随时间或有序类别变化而变化的数据组。

![](/files/-MkkEuw0YW7cGDLHs_oK)

### 五、不适用场景

#### 5.1 变量数据过多

数据样本过多，导致折线堆积，难以聚焦到重点。

例如：彭博的这篇文章（Randall and Migliozzi, 2018）分析了1880-2017年的全球气温状况，每一根折线代表一年的逐月气温，因此折线多达上百根。

解决办法：作者巧妙的加入了交互和动画，让折线一根根渐次出现，同时只保留相对重要的年份，其他的年份都用灰色隐去，大大减少了视觉干扰。

![](/files/-MkkFOnhPIJXkTGld211)

### 六、制作方法

1、使用RayCharts生成折线图，打开下方网址；

```
https://raycharts.raykite.com
```

2、左侧图表区选择折线图；

![](/files/-MkkIVhoXGgEtaBxl3Qt)

3、右侧编辑区自定义样式；

![](/files/-MkjcZHqbULnBXxEq8nr)

4、生成数据或者手动录入；

![](/files/-MkjboXYFK8llfnvKoXE)

5、预览生成效果。

![](/files/-MkkIzh6hUfwekt2fwnZ)

### 七、折线图图史

[William Playfair](http://www.branchcollective.org/?ps_articles=jonathan-sachs-17861801-william-playfair-statistical-graphics-and-the-meaning-of-an-event) 被认为是 18 世纪第一个使用折线图来表示统计数据的人之一。

![](/files/-MkkFsj9RAmFUqSSIB7e)

下面是10世纪行星在宇宙中的周期可视化线图。

![](/files/-MkkG436QXMRZs74xDI8)

在历史进程中，有相当长的时间来完善折线图。随着数据计算的发展，我们现在能够将大量数据呈现为数据图表，也使其具有可交互性、色彩、甚至3D效果。

### 八、设计开眼

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

* [摄影师Marion Luttenberger的摄影信息图表](https://laughingsquid.com/photographer-uses-physical-objects-to-create-ingenious-photographic-infographics/)
* [柱形图与极坐标结合文字、标记的一个综合性信息图](https://www.behance.net/gallery/23964523/Freedom-in-countries-La-LetturaPiccolomini)

### 九、更多学习资源

* [使用折线图需要注意什么？](https://uxdesign.cc/line-chart-design-made-simple-a1b823510674)