折线图(Line Chart)

### 什么是折线图？
Line Chart或Line Graph是一种基本类型的图表，用于描述随时间变化的趋势和行为。它将信息显示为一系列数据点，也称为用一条线连接的“markers”。折线图的一个独特功能是可以将大量数据合并到单个图表中，而不会在查看或理解所呈现的信息时遇到任何困难。

在此折线图指南中，我们将介绍折线图的配置，为您提供常见的用例场景，并向您展示如何绘制不同的折线图类型。

### 数据格式和如何制作折线图？
折线图的数据格式与其他 XY 图的数据格式相同。您需要在图表选项的系列数组中提供数据。要创建这种类型的图表，请将 `chart.type` 属性设置为 Line。有关如何构建系列的更多信息，请参见[使用数据](http://www.bixiaguangnian.com/manual/apexcharts/232.html "使用数据")页面。

### 折线图类型
目前，ApexCharts 的折线图控件让您可以选择配置三种以不同方式连接数据值的折线图类型。折线图的三种变体包括：

- 样条线图
- 直线图
- 阶梯线图

在以下部分中，我们将向您展示如何快速轻松地绘制三种不同的变体。

#### 样条线图
在样条图中，数据点使用平滑曲线连接。要绘制这样一条平滑的曲线，您必须设置以下选项

![](/uploads/images/20221226/6bb1f9892c301197c04ca1f346827a65.png)

```javascript
stroke: {
  curve: 'smooth',
}
```

#### 直线图
以直线连接数据点，不对直线应用任何曲线。

```javascript
stroke: {
  curve: 'straight',
}
```

#### 阶梯线图
在阶梯线图中，点由水平和垂直线段连接，看起来像楼梯的台阶。

```javascript
stroke: {
  curve: 'stepline',
}
```

### 控制线上的标记/点
标记用于表示图表上的特定数据点。任何大于 0 的大小都将启用标记。

要隐藏标记，您可以将大小设置为 0，如下面的代码所示。

```javascript
markers: {
    size: 0,
}
```

![](/uploads/images/20221223/6afbf5cca1698e5d5a0528d0f6a62c1f.png)

有关如何自定义标记的更多信息，请参阅[标记](http://www.bixiaguangnian.com/manual/apexcharts/311.html "标记")文档。

### 在组合图中使用折线
使用 ApexCharts，您可以用其他图表类型绘制一条线。下面的示例给出了如何将线条与其他图表类型组合以创建混合/组合图表的想法。

- area/column/line
- scatter/line
- candlestick/line

`type` 在构建这样的组合图表时，您必须在系列数组中指定。

```javascript
series: [{
    type: 'line',
    data: [...]
  }, {
    type: 'column',
    data: [...]
  }]
```

### 多轴折线图
当您的值范围存在显着差异时，多轴图表允许您绘制具有不同类型单位的多个数据集。

在多轴图表中，可以沿图表的左侧和右侧呈现多个 y 轴。通过使用 2 个 y 轴刻度运行以下示例，您将得到一个清晰的想法。

### 绘制时间序列
时间序列图是一种数据可视化工具，它以渐进的时间间隔绘制数据值。使用 ApexCharts，如果您在序列中提供如下所示的时间戳值并将其设置xaxis.type为 "datetime"，则会创建一个时间序列。

```javascript
series: [{
  data: [{
    x: new Date('2018-02-12').getTime(),
    y: 76
  }, {
    x: new Date('2018-02-12').getTime(),
    y: 76
  }]
}], 
xaxis: {
  type: 'datetime'
} 
```

在绘制包含大量数据点的时间序列图表时，缩放和平移有助于通过更仔细地查看图表来获得清晰的视图。因此，如果您提供 `xaxis.type: 'datetime'` 属性，您将看到所有缩放工具。

### 设置折线图样式
借助 ApexCharts，您可以为折线图赋予所需的外观并增强仪表板设计的外观。我们将介绍设置线条颜色、更改笔划宽度以及使用不同的填充方法来填充 SVG 路径等选项。

#### 虚线
虚线在显示某种类型的数据时很有用。例如，当可用数据不完整时，或者当您想在多系列折线图中与以前的数据进行比较时，虚线在这种情况下会很有帮助。

```javascript
stroke: {
  dashArray: 2
}
```

上面的代码在 SVG 路径的边界中创建破折号。较高的数字会在边框中的破折号之间创建更多空间。

#### 改变线条的颜色
要更改图表中线条的颜色，您只需修改 [colors](http://www.bixiaguangnian.com/manual/apexcharts/304.html "colors") 配置中的属性。如果你想使用预定义的主题调色板，你可以使用 `palette` 主题选项。

```javascript
colors: ['#2E93fA', '#66DA26', '#546E7A', '#E91E63', '#FF9800'];
```

#### 线条宽度
更改线条的宽度很容易。

```javascript
stroke: {
  width: 2
}
```

#### 填充类型
通过指定是否用纯色或渐变或图案填充路径来配置 SVG 路径。

```javascript
fill: {
  type: 'gradient' / 'solid' / 'pattern' / 'image'
}
```

有关如何配置路径填充的更多信息，请参见[fill](http://www.bixiaguangnian.com/manual/apexcharts/306.html#type:%20String%20||%20Array%20of%20String "fill")选项。

### 何时使用折线图？
折线图或图形是最佳选择的几种常见情况：

- 如果您想比较时间轴上的不同趋势。
- 如果您必须显示 2 个或更多数据系列之间的差异。
- 需要以图形方式详细地表示时间序列数据。
- 当您必须可视化大容量数据集并且想要集成诸如平移、缩放和向下钻取之类的交互时。