Highcharter人口金字塔坐标轴标签设置及标题居中问题

问题背景 #

由于Highcharts未提供人口金字塔的内置函数，我通过将其中一侧数据设置为负值，使用bar图表类型手动构建了人口金字塔，但当前面临两个问题：

• 无法将金字塔左侧的负值坐标轴标签显示为正值；
• 希望通过代码自动将金字塔两侧的标题居中到对应区域。

之前尝试将Y轴设置为分类类型并使用categories选项来设置标签，但0的位置显示为20，未能解决问题，同时也接受使用Highcharter构建人口金字塔的其他方案。

解决方案 #

1. 修正左侧坐标轴标签为正值 #

无需将Y轴改为分类类型，直接通过自定义标签格式化函数，将负值转换为正值显示即可：

• 使用hc_yAxis的labels.formatter参数，通过JavaScript函数对每个轴标签值取绝对值。

2. 自动居中两侧标题 #

利用图表加载事件，动态计算绘图区域的宽度，自动调整标题的位置，避免手动硬编码坐标：

• 在hc_chart的events.load事件中，获取绘图区域的宽度，计算左右半区的中心位置，调整两个标题的x坐标。

完整实现代码 #

library(highcharter)
library(dplyr)
library(plyr)

# 生成模拟数据（固定随机种子保证结果可复现）
set.seed(123)
data <- data.frame(
  x = as.factor(c(seq(1,10,1), seq(1,10,1))), 
  y = sample(10:20, size=20, replace=T), 
  group = c(rep(1,10), rep(2,10))
) %>%
  mutate(y = ifelse(group == 1, (-1)*y, y))

# 计算Y轴极值（向上取整到5的倍数）
ylim <- plyr::round_any(max(abs(data$y), na.rm=T), 5)

highchart() %>%
  # 添加条形图系列
  hc_add_series(
    data,
    type = "bar",
    hcaes(x = x, y = y, group = group),
    showInLegend = F
  ) %>% 
  # 设置条形图堆叠模式
  hc_plotOptions(bar = list(stacking = "normal")) %>%
  # 自定义Y轴：显示绝对值标签，设置极值和刻度间隔
  hc_yAxis(
    min = -ylim,
    max = ylim,
    tickInterval = 5,
    labels = list(
      formatter = JS("function() { return Math.abs(this.value); }")
    )
  ) %>%
  # 左侧标题（添加ID用于后续定位）
  hc_title(
    text = "Group 1",
    align = "center",
    y = 20,
    margin = 0,
    style = list(fontSize="12px", color="#0d233a"),
    id = "title-left"
  ) %>%
  # 右侧标题（添加ID用于后续定位）
  hc_subtitle(
    text = "Group 2",
    align = "center",
    y = 20,
    margin = 0,
    style = list(fontSize="12px", color="#2f7ed8"),
    id = "title-right"
  ) %>%
  # 加载事件中自动计算标题位置
  hc_chart(
    events = list(
      load = JS("function() {
        var chart = this;
        var plotWidth = chart.plotWidth;
        var halfWidth = plotWidth / 2;
        
        // 调整左侧标题到左半区域中心
        var leftTitle = chart.title;
        leftTitle.attr({
          x: -chart.plotLeft - halfWidth / 2
        });
        
        // 调整右侧标题到右半区域中心
        var rightTitle = chart.subtitle;
        rightTitle.attr({
          x: chart.plotLeft + halfWidth / 2
        });
      }")
    )
  )

代码说明 #

• 坐标轴标签修正：通过Math.abs(this.value)将所有Y轴标签转换为绝对值，左侧的负值标签自动显示为正值，同时保留坐标轴的数值逻辑。
• 标题自动居中：在图表加载完成后，获取绘图区域的实际宽度，将左侧标题定位到左半区域的中心，右侧标题定位到右半区域的中心，无论图表容器大小如何变化，标题都会保持居中。

内容的提问来源于stack exchange，提问作者DanB