Ant Design Charts 中轴标题方向与间距的配置技巧

轴标题方向配置

在 Ant Design Charts 数据可视化库中，控制坐标轴标题的方向是一个常见需求。根据版本不同，配置方式有所差异：

V1 版本配置方法

在 Ant Design Charts 1.x 版本中，需要通过 rotate 属性来控制标题旋转角度，使用弧度值而非角度值：

yAxis: {
  title: {
    rotate: Math.PI / 2,  // 90度旋转
    text: '轴标题',
    style: {
      fontSize: 16
    }
  }
}

这里 Math.PI / 2 表示 90 度旋转，Math.PI 表示 180 度，依此类推。

V2 版本配置方法

在 2.x 版本中，配置方式有所变化，使用 CSS 的 transform 属性来控制旋转：

yAxis: {
  titleTransform: 'rotate(0deg)',  // 水平方向
  title: {
    text: '轴标题'
  }
}

值得注意的是：

• 默认情况下，轴标题实际上是已经旋转了 90 度的
• 设置为 rotate(0deg) 可使标题变为水平方向
• 设置为 rotate(90deg) 会保持默认的垂直方向

轴标题位置与间距调整

当调整轴标题位置时，特别是设置为 top 位置后，可能会遇到左侧出现不必要间距的问题。这是由于图表自动为轴标签预留的空间导致的。

解决方案

1. 调整边距：可以通过配置图表的 padding 或 margin 属性来手动控制间距

{
  padding: [20, 10, 50, 10],  // 上、右、下、左
  // 其他配置...
}

2. 隐藏轴标签：如果不需要轴标签，可以隐藏它们来释放空间

yAxis: {
  label: {
    style: {
      opacity: 0  // 隐藏标签
    }
  }
}

3. 调整布局：使用 autoFit 和 height/width 属性结合，让图表更好地适应容器

{
  autoFit: true,
  height: 400,
  // 其他配置...
}

最佳实践建议

1. 版本适配：明确自己使用的 Ant Design Charts 版本，选择对应的配置方式
2. 渐进调整：先确定标题方向和位置，再微调间距和样式
3. 响应式考虑：在不同屏幕尺寸下测试图表表现，确保可读性
4. 视觉平衡：调整间距时保持图表整体的视觉平衡，避免标题挤压图表主体

通过合理配置这些属性，可以创建出既美观又功能完善的数据可视化图表，有效传达数据信息。