如何在 Highcharts 中将 yAxis 标题居中答案

【问题标题】：How to center the yAxis title in Highcharts如何在 Highcharts 中将 yAxis 标题居中
【发布时间】：2016-05-31 09:15:04
【问题描述】：

当 yAxis 标题显示在 Highcharts 中的 yAxis 顶部时，有什么方法可以将其居中？这是follow-up question；还没找到解决办法。

这就是现在的样子：

yAxis: {
  title: {
    text: "Cumulative mean<br />annual mass balance<br />(mm w.e.)",
    align: "high",
    rotation: 0,
    x: 180,
    y: -30,
    useHTML: true,
    style: {
      align: "center",
      fontWeight: "bold"
    }
  },

我想让这三个居中。尝试使用 useHTML 并对齐。但是不行……

Here is a fiddle.

感谢任何提示。

【问题讨论】：

将 x 值从 180 更改为 100，否则
如果标题要居中对齐，可以使用subtitle

标签： css highcharts axis

【解决方案1】：

你可以在 CSS 中做到这一点。

要使 y 轴水平居中，添加这些样式，并删除 x 值：

.highcharts-axis {
  position: relative;
  left: 50% !important;
  transform: translateX(-50%);
}

要使其文本居中对齐，请使用以下样式：

.highcharts-axis {
  text-align: center;
}

Updated Fiddle

【讨论】：

为了这篇文章的完整性：Highcharts 代码应该集成 useHTML 标签：yAxis: { title: { useHTML: true}}