数据标签

数据标签是系列中传递的实际值。您可以添加[格式化程序](http://www.bixiaguangnian.com/manual/apexcharts/305.html#formatter:%20function(val,%20opts) "格式化程序")，这将允许您在显示之前修改值。

![](/uploads/images/20221227/50257a2eb1810edffd474e32b527644f.png)

### 更改数据标签位置
#### 在条形图中将位置设置为顶部
> 对于柱形图/条形图，`dataLabels` 在 `plotOptions.bar.dataLabels`

![](/uploads/images/20221227/18f124ba630e496cd0dab225c52999b1.png)

```javascript
plotOptions: {
  bar: {
    dataLabels: {
      position: 'top'
    }
  }
},
```

#### 数据标签偏移量
默认情况下，dataLabels 位于列/栏内。如果我们想把dataLabels移到bar/column之外，我们需要设置offsetX/offsetY属性。

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

```javascript
plotOptions: {
  bar: {
    dataLabels: {
      position: 'top'
    }
  },
  dataLabels: {
    enabled: true,
    style: {
        colors: ['#333']
    },
    offsetX: 30
  },
},
```

#### 将位置设置为底部
通过更改 `plotOptions.bar.dataLabels.position` 为 `bottom`，柱形图看起来像

![](/uploads/images/20221227/239f93937b6c9ab5aa275e36bd104eeb.png)

```javascript
plotOptions: {
  bar: {
    horizontal: false,
    dataLabels: {
      position: 'bottom'
    }
  }
},
```

### 自定义 DataLabels 外观
要设置文本样式，您可以设置数据标签的字体大小、字体粗细。要设置显示在文本后面的背景矩形的样式，您可以自定义，如下面的代码片段所示

![](/uploads/images/20221227/73e82135eeeb2fd18085acfdb76ae7f5.png)

```javascript
dataLabels: {
  style: {
    fontSize: '12px',
    fontWeight: 'bold',
  },
  background: {
    enabled: true,
    foreColor: '#fff',
    borderRadius: 2,
    padding: 4,
    opacity: 0.9,
    borderWidth: 1,
    borderColor: '#fff'
  },
},
```

### 在某些系列上隐藏数据标签
在多系列或组合图表中，如果您不想显示所有系列的标签以避免图表被文本堵塞，您可以使用该 `enabledOnSeries` 属性来实现。

此属性接受一个数组，您必须在其中放置要显示数据标签的系列的索引。

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

```javascript
dataLabels: {
  enabled: true,
  enabledOnSeries: [1]
},
```

在上面的代码中，数据标签只会出现在系列索引 1 中。

### 自定义数据标签
您可以使用 `dataLabels` 的格式化程序并修改生成的标签。下面的示例显示了如何在水平条形图中将 xaxis 类别/标签显示为 `dataLabels`。

```javascript
dataLabels: {
  enabled: true,
  textAnchor: 'start',
  formatter: function(val, opt) {
      return opt.w.globals.labels[opt.dataPointIndex] + ":  " + val
  },
  offsetX: 0,
},
```

### 数据标签阴影
您可以对数据标签应用阴影，使其在彩色图表中更加突出。

![](/uploads/images/20221227/9fdc533736b913e1ce7b78954adc0a99.png)

```javascript
dataLabels: {
  enabled: true,
  dropShadow: {
      enabled: true,
      left: 2,
      top: 2,
      opacity: 0.5
  }
}
```

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