放大类别 X 轴

在 3.15.0 版本之前，缩放在类别 x 轴上不可用。只有日期时间和数字轴支持缩放功能。从 3.15.0 开始，您可以在类别 x 轴上启用缩放。

在条形图上，即使启用 `chart.zoom.enabled: true`，您也会看到它不会激活缩放工具栏。默认情况下，在类别条形图上禁用缩放。如果您仔细查看条形图与折线图上的刻度，您会发现刻度的放置方式有所不同。

![](/uploads/images/20221226/5b59d9ba2641341e7af4248cdf5b02d6.png)

在柱形图上，tickPlacement在标签之间，而在折线图上，tickPlacement在标签之上。如果 `tickPlacement` 设置为 `between`，则禁用类别图表的缩放。

### 改变xaxis.tickPlacement
一旦我们将条形图中的 `xaxis.tickPlacement` 更改为 "on"，我们将看到下面的视觉效果。

![](/uploads/images/20221226/37c6a8a84d5f7bc1f6fa4659efb0f6cc.png)

```javascript
xaxis: {
  categories: ['ABC', 'PQR', 'XYZ'],
  tickPlacement: 'on'
}
```

设置 `tickPlacement: 'on'` 将自动激活缩放工具栏。

### 切换缩放控件
可以通过设置 [chart.zoom](http://www.bixiaguangnian.com/manual/apexcharts/303.html "chart.zoom") 属性来启用/禁用图表的缩放功能。

```javascript
chart: {
  zoom: {
    enabled: true
  }
}
```

## 解决常见问题
### 在条形图上启用缩放后我的条形被裁剪

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

如果在类别条形图上启用缩放后发现条形被裁剪，您可能需要手动设置填充选项，因为自动填充无法准确计算所需空间。

在这种情况下，你可以试试这个

```javascript
grid: {
  padding: {
    left: 30, // or whatever value that works
    right: 30 // or whatever value that works
  }
}
```

### 左边或右边有很多空间

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

同样，启用缩放后类别条形图中可能会有一些额外的填充。您可以将负填充赋予上述相同的grid.padding属性。

## 例子
<iframe src="http://example.itshubao.com/inexample/258.html" width="100%" height="400px" frameborder="0" scrolling="no"></iframe>