annotations

[TOC]
# annotations
  - ## position: String
  是将注释放在图表后面还是前面。
  可用选项：
    - front
    - back
  - ## yaxis: Array
    - ### y: Number
	  将在其上绘制注释的值
    - ### y2: Number
	  如果您提供此额外的 y2 值，则会绘制一个从 y 到 y2 的区域。
	- ### strokeDashArray: Number
	  在 SVG 路径的边界中创建破折号。较高的数字会在边框中的破折号之间创建更多空间。
	- ### borderColor: Color
	  注释线的颜色
	- ### fillColor: Color
	  区域的填充颜色。仅在提供y2时适用。
	- ### opacity: Number
	  填充区域的不透明度。
	- ### offsetX: Number
	  设置注释线的左偏移量
	- ### offsetY: Number
	  设置注释线的顶部偏移
	- ### width: String | Number
	  设置注释线的宽度
	- ### yAxisIndex: Number
	  当有多个 y 轴时，设置此选项将为该特定 y 轴放置注释
	- ### label:
	  - #### borderColor: Color
	    标签的边框颜色
	  - #### borderWidth: Number
	    标签的边框宽度
	  - #### borderRadius: Number
	    标签的外边框圆角
	  - #### text: String
	    注释标签的文本
	  - #### textAnchor: String
	    文本相对于标签绘图位置的对齐方式
        可接受的值
		
		 - start
         - middle
         - end
	  - #### position: String
	    可用选项
		
		- left
		- right
	  - #### offsetX: Number
	    设置注释标签的左偏移量
	  - #### offsetY: Number
	    设置注释标签的顶部偏移量
	  - #### mouseEnter: Function
	    当用户的鼠标进入注释的标签时触发。
	  - #### mouseLeave: Function
	    当用户的鼠标离开注释的标签时触发。
	  - #### click: Function
	    当用户点击注释的标签时触发。
	  - #### style
	    - ##### background: Color
		  注释标签的背景颜色
	    - ##### color: Color
		  注释标签的颜色
	    - ##### fontSize: String
		  注释标签的字体大小
	    - ##### fontWeight: String | Number
		  注释标签的字体粗细
	    - ##### fontFamily: String
		  注释标签的字体系列
	    - ##### cssClass: String
		  给注释标签元素的自定义 Css 类
	    - ##### padding
	      - ###### left: Number
		    标签的左内边距
	      - ###### right: Number
		    标签的右内边距
	      - ###### top: Number
		    标签的顶部内边距
	      - ###### bottom: Number
		    标签的底部内边距
  - ## xaxis: Array
    - ### x: Number
	  将在其上绘制注释的值
    - ### x2: Number
	  如果您提供此额外的 x2 值，则会绘制一个从 x 到 x2 的区域。
    - ### strokeDashArray: Number
	  在 SVG 路径的边界中创建破折号。较高的数字会在边框中的破折号之间创建更多空间。
    - ### borderColor: Color
	  注释线的颜色
    - ### fillColor: Color
	  区域的填充颜色。仅在提供x2时适用。
    - ### opacity: Number
	  填充区域的不透明度。
    - ### offsetX: Number
	  设置注释线的左偏移量
    - ### offsetY: Number
	  设置注释线的顶部偏移
    - ### label:
	  - #### borderColor: Color
	    标签的边框颜色
	  - #### borderWidth: Number
	    标签的边框宽度
	  - #### borderRadius: Number
	    标签的外边框圆角
	  - #### text: String
	    注释标签的文本
	  - #### textAnchor: String
	    文本相对于标签绘图位置的对齐方式
        可接受的值

- start
         - middle
         - end
	  - #### position: String
	    可用选项
		
		- top
		- bottom
	  - #### orientation: String
	    可用选项
		
		- vertical
		- horizontal
	  - #### offsetX: Number
	    设置注释标签的左偏移量
	  - #### offsetY: Number
	    设置注释标签的顶部偏移量
	  - #### mouseEnter: Function
	    当用户的鼠标进入注释的标签时触发。
	  - #### mouseLeave: Function
	    当用户的鼠标离开注释的标签时触发。
	  - #### click: Function
	    当用户点击注释的标签时触发。
	  - #### style
	    - ##### color: Color
		  注释标签的颜色
	    - ##### fontSize: String
		  注释标签的字体大小
	    - ##### fontWeight: String | Number
		  注释标签的字体粗细
	    - ##### fontFamily: String
		  注释标签的字体
	    - ##### cssClass: String
		  给注释标签元素的自定义 Css 类
  - ## points: Array
    - ### x: Number || String
	  将在其上绘制注释的 X 值（可以是日期时间 x 轴的时间戳或类别 x 轴的字符串类别）
    - ### y: Number
	  将在其上绘制注释的 Y 值
    - ### yAxisIndex: Number
	  当有多个 y 轴时，设置此选项将为该特定 y 轴的 y 值放置点注释
    - ### seriesIndex: Number
	  在多个系列中，您必须指定注释的 y 值属于哪个系列。单系列不需要
    - ### mouseEnter: Function
	  当用户的鼠标进入点注释的标记时触发。
    - ### mouseLeave: Function
	  当用户的鼠标离开点注释的标记时触发。
    - ### click: Function
	  当用户单击点注释的标记时触发。
    - ### marker
	  - #### size: Number
	    标记的大小。
	  - #### fillColor: String
	    标记点的填充颜色。
	  - #### strokeColor: String
	    标记点的描边颜色。
	  - #### strokeWidth: Number
	    标记点的笔划大小。
	  - #### shape: String
	    标记的形状。
	    可用的形状选项
		
		 - circle
		 - square
	  - #### radius: Number
	    标记的半径（适用于方形）
	  - #### offsetX: Number
	    设置标记的左偏移量
	  - #### offsetY: Number
	    设置标记的顶部偏移量
	  - #### cssClass: String
	    要附加到标记的其他 CSS 类
	- ### label:
	  - #### borderColor: Color
	    标签的边框颜色
	  - #### borderWidth: Number
	    标签的边框宽度
	  - #### borderRadius: Number
	    标签的外边框圆角
	  - #### text: String
	    注释标签的文本
	  - #### textAnchor: String
	    文本相对于标签绘图位置的对齐方式
        可接受的值
		
		 - start
		 - middle
		 - end
	  - #### offsetX: Number
	    设置注释标签的左偏移量
	  - #### offsetY: Number
	    设置注释标签的顶部偏移量
	  - #### mouseEnter: Function
	    当用户的鼠标进入点注释的标签时触发。
	  - #### mouseLeave: Function
	    当用户的鼠标离开点注释的标签时触发。
	  - #### click: Function
	    当用户单击点注释的标签时触发。
	  - #### style
	    - ##### background: Color
		  注释标签的背景颜色
	    - ##### color: Color
		  注释标签的颜色
	    - ##### fontSize: String
		  注释标签的字体大小
	    - ##### fontWeight: String | Number
		  注释标签的字体粗细
	    - ##### fontFamily: String
		  注释标签的字体
	    - ##### cssClass: String
		  给注释标签元素的自定义 Css 类
	    - ##### padding
	      - ###### left: Number
		    标签的左内边距
	      - ###### right: Number
		    标签的右内边距
	      - ###### top: Number
		    标签的顶部内边距
	      - ###### bottom: Number
		    标签的底部内边距
    - ### image:
	  - #### path: String
	    提供图像的完整路径以代替注释显示。
	  - #### width: Numberheight: Number
	    图像注释的宽度。
	  - #### height: Number
	    图像注释的高度。
	  - #### offsetX: Number
	    图像的左偏移。
	  - #### offsetY: Number
	    图像的顶部偏移。
  - ## texts: Array
    - ### x: Number
	  文本相对于 `appendTo` 属性中指定元素的 X（左）位置
    - ### y: Number
	  文本相对于 `appendTo` 属性中指定元素的 Y（顶部）位置
    - ### text: String
	  要显示的主要文本
    - ### textAnchor: String
	  文本相对于标签绘图位置的对齐方式
      可接受的值
	  
	   - start
	   - middle
	   - end
    - ### color: Color
	  注释标签的颜色
    - ### fontSize: String
	  注释标签的字体大小
    - ### fontWeight: String | Number
	  注释标签的字体粗细
    - ### fontFamily: String
	  注释标签的字体系列
    - ### appendTo: String
	  文本元素将附加到的查询选择器。
    - ### borderColor: Color
	  标签的边框颜色
    - ### borderRadius: Number
	  标签的外边框圆角
    - ### borderWidth: Number
	  标签的边框宽度
    - ### paddingLeft: Number
	  标签的左内边距
    - ### paddingRight: Number
	  标签的右内边距
    - ### paddingTop: Number
	  标签的顶部内边距
    - ### paddingBottom: Number
	  标签的底部内边距
  - ## images: Array
    - ### path: String
	  图片的绝对路径
    - ### x: Number
	  图像相对于 `appendTo` 属性中指定元素的左侧位置
    - ### y: Number
	  图像相对于 `appendTo` 属性中指定元素的顶部位置
    - ### width: Number
	  图片的宽度
    - ### height: Number
	  图片的高度
    - ### appendTo: String
	  图像元素将附加到的查询选择器。

```javascript
annotations: {
  position: 'front' ,
  yaxis: [{
      y: 0,
      y2: null,
      strokeDashArray: 1,
      borderColor: '#c2c2c2',
      fillColor: '#c2c2c2',
      opacity: 0.3,
      offsetX: 0,
      offsetY: -3,
      width: '100%',
      yAxisIndex: 0,
      label: {
          borderColor: '#c2c2c2',
          borderWidth: 1,
          borderRadius: 2,
          text: undefined,
          textAnchor: 'end',
          position: 'right',
          offsetX: 0,
          offsetY: 0,
          mouseEnter: undefined,
          mouseLeave: undefined,
          click: undefined,
          style: {
              background: '#fff',
              color: '#777',
              fontSize: '12px',
              fontWeight: 400,
              fontFamily: undefined,
              cssClass: 'apexcharts-yaxis-annotation-label',
              padding: {
                left: 5,
                right: 5,
                top: 0,
                bottom: 2,
              }
          },
      },
  }],
  xaxis: [{
    x: 0,
    x2: null,
    strokeDashArray: 1,
    borderColor: '#c2c2c2',
    fillColor: '#c2c2c2',
    opacity: 0.3,
    offsetX: 0,
    offsetY: 0,
    label: {
        borderColor: '#c2c2c2',
        borderWidth: 1,
        borderRadius: 2,
        text: undefined,
        textAnchor: 'middle',
        position: 'top',
        orientation: 'vertical',
        offsetX: 0,
        offsetY: 0,
        mouseEnter: undefined,
        mouseLeave: undefined,
        click: undefined,
        style: {
            background: '#fff',
            color: '#777',
            fontSize: '12px',
            fontWeight: 400,
            fontFamily: undefined,
            cssClass: 'apexcharts-xaxis-annotation-label',
        },
    },
  }],
  points: [{
    x: 0,
    y: null,
    yAxisIndex: 0,
    seriesIndex: 0,
    mouseEnter: undefined,
    mouseLeave: undefined,
    click: undefined,
    marker: {
      size: 0,
      fillColor: "#fff",
      strokeColor: "#333",
      strokeWidth: 3,
      shape: "circle",
      radius: 2,
      OffsetX: 0,
      OffsetY: 0,
      cssClass: '',
    },
    label: {
        borderColor: '#c2c2c2',
        borderWidth: 1,
        borderRadius: 2,
        text: undefined,
        textAnchor: 'middle',
        offsetX: 0,
        offsetY: -15,
        mouseEnter: undefined,
        mouseLeave: undefined,
        click: undefined,
        style: {
            background: '#fff',
            color: '#777',
            fontSize: '12px',
            fontWeight: 400,
            fontFamily: undefined,
            cssClass: 'apexcharts-point-annotation-label',
            padding: {
              left: 5,
              right: 5,
              top: 0,
              bottom: 2,
            }
        },
    },
    image: {
      path: undefined,
      width: 20,
      height: 20,
      offsetX: 0,
      offsetY: 0,
    }
  }],
  
  texts: [{
    x: 0,
    y: 0,
    text: '',
    textAnchor: 'start',
    foreColor: undefined,
    fontSize: '13px',
    fontFamily: undefined,
    fontWeight: 400,
    appendTo: '.apexcharts-annotations',
    backgroundColor: 'transparent',
    borderColor: '#c2c2c2',
    borderRadius: 0,
    borderWidth: 0,
    paddingLeft: 4,
    paddingRight: 4,
    paddingTop: 2,
    paddingBottom: 2,
  }],

images: [{
    path: '',
    x: 0,
    y: 0,
    width: 20,
    height: 20,
    appendTo: '.apexcharts-annotations'
  }],
}
```