如何修改dygraphs的日期轴标签为1QYY季度格式

我有一个包含4列季度数据的xts对象，当前使用dygraphs绘制的图表日期轴标签显示为"mm yyyy"格式，我希望将其调整为"1QYY"样式的季度格式，但不清楚如何使用dyAxis函数的axisLabelFormatter参数实现该需求。

现有代码 #

dados_graf_1 %>%
  dygraph() %>%
  dySeries("PIB_sa", label = "PIB", color = "#c7940b", strokeWidth = 3) %>%
  dySeries("Agro_sa", label = "Agropecuária", color = "#a9a9a9", strokeWidth = 3) %>%
  dySeries("Ind_sa", label = "Indústria", color = "#206785", strokeWidth = 3) %>%
  dySeries("Serv_sa", label = "Serviços", color = "#010101", strokeWidth = 3, strokePattern = "dashed") %>%
  dyOptions(gridLineColor = "white", gridLineWidth = 0.2) %>%
  dyLegend(show = "always", hideOnMouseOut = TRUE, width = 622) %>%
  dyRangeSelector(height = 30, fillColor = "#abacae", dateWindow = c("2018-06-01", "2021-12-01"))

数据结构 #

structure(c(59.4686002115258, 60.0003634242107, 62.3501901028889, 
61.7102611737569, 62.3167251492956, 62.7386272902486, 63.5178979190809, 
64.010330551864, 62.7735159185782, 63.7922085619849, 40.941808998477, 
41.469578632432, 43.7163221802143, 53.8999836721848, 43.7866060869199, 
43.0961440203287, 44.5155510158354, 48.2617616388888, 43.0388053925826, 
48.3894575959625, 78.0053327716668, 75.2249841097006, 81.916723278062, 
76.9363727724092, 80.9312975004623, 80.6444045847008, 82.2266773995473, 
81.9387558324773, 80.0399787575468, 81.2163539287905, 57.3829121992107, 
58.0993981656538, 58.9478082292876, 57.7405388428977, 59.1413925759281, 
59.3957517630808, 59.7297910855835, 60.4324312997044, 59.9485782636543, 
60.4706850605738), class = c("xts", "zoo"), index = structure(c(825638400, 
833587200, 841536000, 849398400, 857174400, 865123200, 87307200, 
880934400, 888710400, 896659200), tzone = "UTC", tclass = "Date"), .Dim = c(10L, 
4L), .Dimnames = list(NULL, c("PIB_sa", "Agro_sa", "Ind_sa", 
"Serv_sa")))

当前效果图 #

你只需要在原有代码的管道链末尾追加dyAxis配置即可，通过自定义JavaScript函数处理日期到季度格式的转换：

library(dygraphs)
library(xts)

dados_graf_1 %>%
  dygraph() %>%
  dySeries("PIB_sa", label = "PIB", color = "#c7940b", strokeWidth = 3) %>%
  dySeries("Agro_sa", label = "Agropecuária", color = "#a9a9a9", strokeWidth = 3) %>%
  dySeries("Ind_sa", label = "Indústria", color = "#206785", strokeWidth = 3) %>%
  dySeries("Serv_sa", label = "Serviços", color = "#010101", strokeWidth = 3, strokePattern = "dashed") %>%
  dyOptions(gridLineColor = "white", gridLineWidth = 0.2) %>%
  dyLegend(show = "always", hideOnMouseOut = TRUE, width = 622) %>%
  dyRangeSelector(height = 30, fillColor = "#abacae", dateWindow = c("2018-06-01", "2021-12-01")) %>%
  # 新增x轴季度格式配置
  dyAxis("x", 
         axisLabelFormatter = "function(d) {
           const month = d.getMonth() + 1;
           const quarter = Math.ceil(month / 3);
           const yearSuffix = d.getFullYear().toString().slice(-2);
           return `${quarter}Q${yearSuffix}`;
         }",
         # 可选：配置鼠标悬停时图例的日期也显示为季度格式
         valueFormatter = "function(millis) {
           const d = new Date(millis);
           const month = d.getMonth() + 1;
           const quarter = Math.ceil(month / 3);
           const yearSuffix = d.getFullYear().toString().slice(-2);
           return `${quarter}Q${yearSuffix}`;
         }")

逻辑说明 #

• axisLabelFormatter参数接收JavaScript函数作为输入，dygraphs会自动将轴上的每一个日期对象传入该函数处理后再渲染
• JS中getMonth()返回的月份从0开始计数，所以需要+1得到实际月份
• 通过Math.ceil(month/3)计算对应季度：1-3月为1季度、4-6月为2季度，以此类推
• 取年份的最后两位字符，和季度拼接后即可得到你需要的"1QYY"格式

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