自动换行和多行文本

### 如何处理轴标签中的长文本
图表中的一种常见情况是在 x 轴和 y 轴（在水平条形图的情况下）上显示信息文本标签。

在本操作指南中，我们将了解如何通过稍微修改类别的文本输入来实现换行和多行标签。

### x 轴中的默认长标签
默认情况下，如果不适合可用区域，x 轴上的长标签将旋转[-45°](http://www.bixiaguangnian.com/manual/apexcharts/333.html#rotate:%20Number "-45°") 。更重要的是，如果标签仍然溢出该区域，则标签将被[截断](http://www.bixiaguangnian.com/manual/apexcharts/333.html#trim:%20Boolean "截断")。实现此默认行为时请记住，如果标签超过大小，用户不必手动截断或旋转标签。

![](/uploads/images/20221226/43d56845ed55844fb13e5119e1ce7608.png)

上面显示的标签使用的xaxis代码如下

```javascript
xaxis: {
  categories: [
    'Apples',
    'Oranges',
    'Strawberries',
    'Pineapples',
    'Mangoes',
    'Bananas',
    'Blackberries',
    'Pears',
    'Watermelons',
    'Quararibea cordata (Chupa Chupa)',
    'Pomegranates',
    'Tangerines',
    'Papayas'
  ]
}
```

### 修改换行符的标签
如上面的代码片段所示，`categories` 数组由字符串项组成。要启用多行文本和自动换行，我们必须为每个需要换行的单词提供一个字符串数组。下面的代码将提供一个清晰的思路。

```javascript
xaxis: {
  categories: [
    'Apples',
    'Strawberries',
    'Pineapples',
    ['Sugar', 'Baby', 'Watermelon'],
    ['Prickly', 'Pear'],
    'Pears',
    ['Quararibea', 'cordata'],
    'Pomegranates',
    'Tangerines'
  ]
}
```

![](/uploads/images/20221226/b50792225ec881e7c3b3af3efd58320f.png)

您可能会注意到，即使您在类别标签中提供了一个数组，文本仍然会旋转。这是一个有效的行为，因为空间中放不下太多标签。

要关闭 x 轴标签的旋转，您必须设置以下属性。

```javascript
xaxis: {
  labels: {
    rotate: 0
  }
}
```

禁用标签旋转后，您将看到下图。为了演示的目的，我从原始数组中删除了一些项目以避免修剪文本。

![](/uploads/images/20221226/2ced6e27fb1666e9dd305137b263055f.png)

### 水平条形图中 y 轴标签中的换行符
上面的示例适用于具有垂直列的类别条形图。下面我们将看到如何为水平条形图实现相同的效果。

默认情况下，水平条形图中的长标签会生成以下图像。请注意，水平条形图标签仍然在 中提供 `xaxis.categories`。

![](/uploads/images/20221226/05c063f95d61a7909d076378bc9fddfe.png)

```javascript
xaxis: {     
  categories: [
    'Apples',
    'Pineapples',
    'Pears',
    'Quararibea cordata (Chupa)',
    'Prickly Pear',
    'Tangerines'
  ]
}
```

### 在水平条形图轴中启用换行符
配置水平条形图标签与其他笛卡尔图表没有区别。只需将普通字符串转换为字符串数组即可。

![](/uploads/images/20221226/0a8163cefbc7e9bbdf6cec6245d8b8c9.png)

```javascript
xaxis: {
  categories: [
    'Apples',
    'Pineapples',
    'Pears',
    ['Quararibea', 'cordata'],
    ['Prickly', 'Pear'],
    'Tangerines'
  ]
}
```