R语言Highcharter Xrange图表24小时时间轴显示异常求助

核心问题分析 #

1. 时间解析错误：原始时间字符串带CST后缀，但as.POSIXct的格式参数未匹配该部分，导致时间解析偏差；
2. X轴未锁定单日范围：未指定X轴的最小/最大时间，图表自动扩展范围，无法聚焦单日24小时周期；
3. Y轴类别重复：直接用DT$methods作为Y轴类别会出现重复项，造成轴标签混乱。

修复后的完整代码 #

library(data.table)
library(lubridate)
library(highcharter)

N <- 7

DT <- data.table(
  start = c("2023-09-04 05:45:01 CST","2023-09-04 06:28:17 CST",
            "2023-09-04 06:51:39 CST","2023-09-04 07:25:30 CST","2023-09-04 08:20:13 CST",
            "2023-09-04 09:20:41 CST","2023-09-04 09:34:33 CST"),
  end = c("2023-09-04 07:10:38 CST","2023-09-04 07:38:01 CST",
          "2023-09-04 08:35:34 CST","2023-09-04 08:48:26 CST","2023-09-04 09:29:07 CST",
          "2023-09-04 10:30:34 CST","2023-09-04 10:53:42 CST"),
  methods =  c("Prototyping", "Development","Testing", "Validation", 
               "Modelling","Prototyping","Development"),
  cat = rep(1:5, length.out = N) - 1, 
  progress = round(stats::runif(N), 1)
) %>%
  # 移除时间字符串末尾的CST后缀
  mutate(start_clean = sub(" CST$", "", start),
         end_clean = sub(" CST$", "", end)) %>%
  # 按指定时区解析时间，转成Highcharts要求的毫秒级时间戳
  mutate(StDay_Time = as.numeric(as.POSIXct(start_clean, tz = "Asia/Taipei")) * 1000,
         EnDay_Time = as.numeric(as.POSIXct(end_clean, tz = "Asia/Taipei")) * 1000)

# 定义单日的起始/结束时间戳（毫秒），锁定X轴范围
day_start <- as.numeric(as.POSIXct("2023-09-04 00:00:00", tz = "Asia/Taipei")) * 1000
day_end <- as.numeric(as.POSIXct("2023-09-05 00:00:00", tz = "Asia/Taipei")) * 1000

# 生成无重复的Y轴类别列表
unique_methods <- unique(DT$methods)

hchart(DT,"xrange",
       hcaes(x = StDay_Time, x2 = EnDay_Time, y = cat, partialFill = progress),
       dataLabels = list(enabled = TRUE)) %>% 
  hc_xAxis(
    title = FALSE,
    type = "datetime",
    min = day_start,
    max = day_end,
    # 设置X轴标签显示为小时分钟格式
    labels = list(format = "%H:%M")
  ) %>% 
  hc_yAxis(
    title = FALSE,
    categories = unique_methods
  )

关键修复点说明 #

• 时间解析修正：用sub移除字符串末尾的CST后缀，确保as.POSIXct准确解析时间，同时指定tz="Asia/Taipei"保证时区一致性；
• X轴范围锁定：通过min和max参数强制X轴仅显示单日24小时，搭配labels.format优化时间显示格式；
• Y轴类别优化：使用unique(DT$methods)生成无重复类别，避免Y轴标签混乱。

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