注释

### 注释图表
ApexCharts 中的注释允许您在特定数据点或轴值上编写自定义文本。

### Y 轴注释
在 y 轴上绘制注释会绘制一条水平线以及一个描述性文本标签。

![](/uploads/images/20221227/8abc0bee7ead04ff0a989199bdfd3501.png)

```javascript
annotations: {
  yaxis: [
    {
      y: 8800,
      borderColor: '#00E396',
      label: {
        borderColor: '#00E396',
        style: {
          color: '#fff',
          background: '#00E396'
        },
        text: 'Y-axis annotation on 8800'
      }
    }
  ]
}
```

#### Y 轴范围注释
您还可以有一个 y 轴范围注释，它在 y 和 y2 值之间绘制一个矩形而不是一条线。

![](/uploads/images/20221227/f7484f5dd08418f9763d7fd535ca9044.png)

```javascript
annotations: {
  yaxis: [
    {
      y: 8600,
      y2: 9000,
      borderColor: '#000',
      fillColor: '#FEB019',
      label: {
        text: 'Y-axis range'
      }
    }
  ]
}
```

### X轴注释
x 轴注释是在图表的 x 值上绘制的垂直线。x在下面的示例中，时间戳在注释的属性中传递。

![](/uploads/images/20221227/abcb2cc3e22c75b91043eddc7c0f2b52.png)

```javascript
annotations: {
  xaxis: [
    {
      x: new Date('23 Nov 2017').getTime(),
      borderColor: '#775DD0',
      label: {
        style: {
          color: '#fff',
        },
        text: 'X-axis annotation - 22 Nov'
      }
    }
  ]
}
```

> 如果您绘制了类别 x 轴而不是日期时间，则只需传递一个字符串值，它就会在类别上绘制注释。可以在此 [类别图表](https://apexcharts.com/javascript-chart-demos/column-charts/column-with-rotated-xaxis-labels/ "类别图表")上找到带有字符串值的 x 轴注释示例。

#### 如果您绘制了带有日期时间值的类别 x 轴怎么办？
如果你在 x 轴上有日期值但你没有使用 `xaxis.type: 'datetime'`，而不是传递时间戳，你将必须传递如下所示的日期字符串。

```javascript
annotations: {
  xaxis: [
    {
      x: 'Oct 06',
      borderColor: '#00E396',
      label: {
        borderColor: '#00E396',
        orientation: 'horizontal',
        text: 'X Annotation'
      }
    }
  ]
}
```

#### X 轴范围注释
您还可以有一个 x 轴范围注释，它在 x 和 x2 值之间绘制一个矩形而不是一条线。

![](/uploads/images/20221227/45f2c24706f038242e948b7a6ff1a875.png)

```javascript
xaxis: [
  {
    x: new Date('26 Nov 2017').getTime(),
    x2: new Date('28 Nov 2017').getTime(),
    fillColor: '#B3F7CA',
    label: {
      text: 'X-axis range'
    }
  }
]
```

### 点 (XY) 注释
点注释，也称为 XY 注释，是通过同时考虑图表上的 x 和 y 点来绘制的。不是一条线，而是在点的顶部绘制一个标记，可以按如下方式自定义

![](/uploads/images/20221227/20c79f53a603c3ba415de414eeadde53.png)

```javascript
points: 
[
  {
    x: new Date('01 Dec 2017').getTime(),
    y: 8607.55,
    marker: {
      size: 8,
    },
    label: {
      borderColor: '#FF4560',
      text: 'Point Annotation'
    }
  }
]
```

### 完整示例

有关可用于注释的全套选项，请参阅 [annotations](http://www.bixiaguangnian.com/manual/apexcharts/277.html "annotations") 配置。