highcharter绘制甘特图如何添加100%/80%目标标注文本

需求背景 #

使用highcharter包绘制甘特图时，默认仅能展示任务完成度数值，无法直观呈现目标阈值，需要在任务条对应100%、80%等完成度位置添加文本标注，明确标识目标阈值位置。
原始基础代码如下：

library(lubridate)
library(tidyverse)

N <- 6
set.seed(1234)

df <- tibble(
  start = sort(Sys.Date() + months(2 + sample(10:20, size = N))),
  end = start + months(sample(1:3, size = N, replace = TRUE)),
  name = c("Import", "Tidy", "Visualize", "Model", "Transform", "Communicate"),
  id = tolower(name),
  dependency = list(NA, "import", "tidy", "tidy", "tidy", c("visualize", "model", "transform")),
  completed = c(1, 1, 0.5, 0.6, 0.9, 0)
)

df <- mutate_if(df, is.Date, datetime_to_timestamp)

highchart(type = "gantt") %>% 
  hc_add_series(
    name = "Program",
    data = df
  ) %>% 
  hc_rangeSelector(enabled = TRUE) %>% 
  hc_navigator(
    enabled = TRUE,
    series = list(
      type = 'gantt',
      pointPlacement = 0.5,
      pointPadding =  0.25
    ),
    yAxis = list(
      min = 0,
      max = N,
      reversed = TRUE,
      categories = c()
    )
  )

实现方法 #

甘特图的任务条沿x时间轴延伸，完成度按任务条总长度占比计算，直接调用hc_annotations添加独立标注层是最灵活的实现方式，不需要改动原始任务数据结构，标注位置可以精准对齐到每个任务条的对应完成度位置，不会和原有完成度展示冲突。
修改后可直接运行的完整代码：

library(lubridate)
library(tidyverse)
library(highcharter)

N <- 6
set.seed(1234)

df <- tibble(
  start = sort(Sys.Date() + months(2 + sample(10:20, size = N))),
  end = start + months(sample(1:3, size = N, replace = TRUE)),
  name = c("Import", "Tidy", "Visualize", "Model", "Transform", "Communicate"),
  id = tolower(name),
  dependency = list(NA, "import", "tidy", "tidy", "tidy", c("visualize", "model", "transform")),
  completed = c(1, 1, 0.5, 0.6, 0.9, 0)
)

df <- mutate_if(df, is.Date, datetime_to_timestamp)

# 自定义要展示的阈值和对应标签
thresholds <- c(0.8, 1)
threshold_labels <- c("80%目标", "100%目标")
# 批量生成每个任务对应阈值的标注坐标配置
annotation_list <- map2(seq_len(N)-1, df$name, function(y_idx, task_name){
  task_row <- df[df$name == task_name, ]
  task_total_length <- task_row$end - task_row$start
  map2(thresholds, threshold_labels, function(th, label){
    list(
      x = task_row$start + task_total_length * th,
      y = y_idx,
      title = list(
        text = label,
        style = list(fontSize = "10px", color = ifelse(th ==1, "#d32f2f", "#f57c00"))
      ),
      anchor = "top",
      yOffset = -5
    )
  })
}) %>% unlist(recursive = FALSE)

highchart(type = "gantt") %>% 
  hc_add_series(
    name = "Program",
    data = df,
    # 可选：开启任务条内置完成度百分比标签
    dataLabels = list(
      enabled = TRUE,
      format = "{point.completed*100}%",
      align = "center",
      color = "#fff"
    )
  ) %>% 
  hc_rangeSelector(enabled = TRUE) %>% 
  hc_navigator(
    enabled = TRUE,
    series = list(
      type = 'gantt',
      pointPlacement = 0.5,
      pointPadding =  0.25
    ),
    yAxis = list(
      min = 0,
      max = N,
      reversed = TRUE,
      categories = c()
    )
  ) %>%
  # 加载标注依赖模块
  hc_add_dependency("modules/annotations.js") %>%
  # 注入所有阈值标注
  hc_annotations(
    list(
      labelOptions = list(
        crop = FALSE,
        overflow = "none"
      ),
      labels = annotation_list
    )
  )

关键可调参数 #

• 阈值配置：直接修改thresholds和threshold_labels两个向量即可增删目标阈值，比如要新增60%及格线，只需要给两个向量分别追加0.6和"60%及格"即可
• 位置调整：yOffset = -5控制标注与任务条的垂直间距，负数为向上偏移，改为正数会将标注放在任务条下方；修改anchor参数可以调整标注锚点位置，支持top/bottom/left/right四个值
• 样式调整：style节点内可自定义标注的字号、颜色、字重，建议给不同等级阈值设置差异化颜色，提升辨识度
• 全局标注：如果不需要给每个任务单独加标注，仅需要在图表顶部统一展示阈值说明，可以跳过批量生成标注点的步骤，直接在hc_annotations里配置固定坐标的单条/多条标注即可。

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