如何为Highcharts图表的Tooltip添加周数列值？

我有两个数据集data和data2，均包含日期和数值两列。希望在Highcharts图表的每个数据点提示框（Tooltip）中，显示对应数据点的周数。

原始数据集 #

data <- structure(list(DATA = structure(c(19327, 19328, 19331, 19332, 
                                          19333, 19334, 19335, 19338, 19339, 19340, 19341, 19342, 19345, 
                                          19346, 19347, 19348, 19349), class = "Date"), 
                       AUM = c(32962594L,
                               33213220L, 33278745L, 33482196L, 33591402L, 33591402L, 33660796L, 
                               33810382L, 34172853L, 34264748L, 34032274L, 34216610L, 34416588L, 
                               34462226L, 35308681L, 35429483L, 35456650L)), row.names = c(NA, 
                                                                                           -17L), class = "data.frame")

data2 <- structure(list(DATA = structure(c(19327, 19328, 19331, 19332, 
                                           19333, 19334, 19335, 19338, 19339, 19340, 19341, 19342, 19345, 
                                           19346, 19347, 19348, 19349), class = "Date"), 
                        CUM_SUM = c(0L, 
                                    173080L, 318158L, 504538L, 607304L, 607304L, 771404L, 916984L, 
                                    1153354L, 1292314L, 1381434L, 1708534L, 1937284L, 2035272L, 2817863L, 
                                    3046949L, 3046949L)), row.names = c(NA, -17L), class = "data.frame")

按周聚合数据的原始代码 #

# AUM数据：取每周最后一天的数据
data <- setDT(data)[order(DATA), .(AUM = AUM[which.max(DATA)], DATA = DATA[which.max(DATA)]), by = .(year(DATA), week(DATA))]  
data <- data[order(data$DATA),]

# 累计NP数据：取每周最后一天的数据
data2 <- setDT(data2)[order(DATA), .(CUM_SUM = CUM_SUM[which.max(DATA)], DATA = DATA[which.max(DATA)]), by = .(year(DATA), week(DATA))]
data2 <- data2[order(data$DATA),]

修改方案 #

要在提示框中显示周数，需要两步操作：

• 数据处理时保留周数列，方便后续调用
• 修改提示框的格式化函数，添加周数展示

步骤1：修改数据处理代码，保留周数 #

修改聚合代码，将周数作为单独列保留在数据集中：

# AUM数据处理：保留周数
data <- setDT(data)[order(DATA), .(
  AUM = AUM[which.max(DATA)], 
  DATA = DATA[which.max(DATA)],
  week_num = week(DATA)[which.max(DATA)]  # 新增周数列
), by = .(year(DATA), week(DATA))]  
data <- data[order(data$DATA),]

# 累计NP数据处理：保留周数
data2 <- setDT(data2)[order(DATA), .(
  CUM_SUM = CUM_SUM[which.max(DATA)], 
  DATA = DATA[which.max(DATA)],
  week_num = week(DATA)[which.max(DATA)]  # 新增周数列
), by = .(year(DATA), week(DATA))]
data2 <- data2[order(data$DATA),]

步骤2：修改Highcharts代码，在提示框中加入周数 #

修改hc_tooltip的formatter函数，在每个系列的提示内容后添加周数：

# 折线图代码（修改后）
highchart() %>%
  hc_add_series(name = "AUM", yAxis = 0, id = "aum_line", data = data, type = 'line', 
                hcaes(x = DATA, y = AUM, week_num = week_num),  # 映射周数字段
                events = list(
                  legendItemClick = htmlwidgets::JS(
                    "function(e) {
                      var shown = this.visible ? false : true;
                      this.update({visible: shown});
                      return false;
                    }"
                ))) %>%
  hc_add_series(name = "AUM",id = 'aum_line_percent', data = data, type = "line", 
                hcaes(x = DATA, y = AUM, week_num = week_num),  # 映射周数字段
                compare = 'percent', linkedTo = 'aum_line', visible = F) %>%  
  hc_add_series(name = '累计NP', yAxis = 1, id = 'pl_cum_line', data = data2, type = 'line', 
                hcaes(x = DATA, y = CUM_SUM, week_num = week_num),  # 映射周数字段
                events = list(
                  legendItemClick = htmlwidgets::JS(
                    "function(e) {
                      var shown = this.visible ? false : true;
                      this.update({visible: shown});
                      return false;
                    }"
                ))) %>%
  hc_add_series(name = "累计NP",id = 'pl_cum_line_percent', data = data2, type = "line", 
                hcaes(x = DATA, y = CUM_SUM, week_num = week_num),  # 映射周数字段
                compare = 'percent', linkedTo = 'pl_cum_line', visible = F) %>% 
  hc_yAxis_multiples(list(title = list(text = "AUM", style = list(fontSize = "1.5em", color = '#607B8B' )), opposite = FALSE),
                     list(showLastLabel = FALSE, opposite = TRUE, title = list(text = "累计NP", style = list(fontSize = "1.5em", color = '#CD8162')))) %>%
  hc_xAxis(type = "datetime") %>% 
  hc_plotOptions(column = list(dataLabels = list(enabled = F),enableMouseTracking = T)) %>%
  hc_chart(zoomType = 'xy') %>%
  hc_colors(c('#607B8B','#607B8B','#CD8162','#CD8162')) %>%
  hc_tooltip(split = T, crosshairs = T,
             formatter = htmlwidgets::JS(
               "function(tooltip) {
                        function pref(pts) {
                        col = pts.color; y = pts.y; nm = pts.series.name;
                        compVal = pts.series.linkedSeries[0].dataModify.compareValue;
                        delta = (y - compVal)/compVal * 100;
                        adder = `(${delta.toFixed(2)}%)</span>`;
                        y = Highcharts.numberFormat(y, 0, '.', ' ');
                        // 新增周数展示
                        weekText = `<br>周数: ${pts.point.week_num}`;
                        return `<b><span style='color:${col};'>● ${nm}:</span></b> ${y} ` + adder + weekText;
                        }
                        xform = Highcharts.dateFormat('%Y年%m月%d日', this.x);  // 改为中文日期格式
                        ttd1 = pref(this.points[0]);
                        ttd2 = pref(this.points[1]);
                        return [xform, ttd1, ttd2];
                        }"
  )) %>%
  hc_exporting(enabled = TRUE)

修改后，提示框会显示类似如下内容：

累计NP: 1 708 534 (887.14%)
周数: 50

AUM: 34 216 610 (3.02%)
周数: 50

内容的提问来源于stack exchange，提问作者Caetano Almeida e Brito