如何调整Highcharts图表X轴月度日期标签的显示位置？

调整后效果 #

采用@Kat的方案修改后，图表X轴标签已正确匹配数据点，标签显示为March 22, Jun 22, Sept 22, Dec 22，2022年12月的数据点对应标签准确显示为Dec 22。

原始问题 #

我有两个结构一致的4列数据集data和data2，存储2022年1-12月的业务数据，数据集结构如下：

data <- structure(list(year = c(2022, 2022, 2022, 2022, 2022, 2022, 2022, 2022, 2022, 2022, 2022, 2022), month = c(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12), AUM = c(32679911L, 32346742L, 34420603L, 34420603L, 37224840L, 36470615L, 36470615L, 36368089L, 33122740L, 35996741L, 36653126L, 36047829L), DATA = structure(c(19023, 19051, 19082, 19111, 19143, 19173, 19202, 19235, 19265, 19296, 19326, 19356), class = "Date")), row.names = c(NA, -12L), class = c("data.table", "data.frame"))

data2 <- structure(list(year = c(2022, 2022, 2022, 2022, 2022, 2022, 2022, 2022, 2022, 2022, 2022, 2022), month = c(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12), CUM_SUM = c(-297163L, -552969L, -1186800L, -1323710L, -778329L, -334843L, 96513L, 75763L, 874981L, 1100124L, 1009281L, 961152L), DATA = structure(c(19023, 19051, 19082, 19111, 19143, 19173, 19202, 19235, 19265, 19296, 19326, 19356), class = "Date")), row.names = c(NA, -12L), class = c("data.table", "data.frame"))

使用以下代码绘制双Y轴折线图：

# Line Plot:
highchart() %>%
  hc_add_series(name = "AUM", yAxis = 0, id = "aum_line", data = data, type = 'line', hcaes(x = DATA, y = AUM), 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),
                compare = 'percent', linkedTo = 'aum_line', visible = F) %>% # <-- linked & invisible!)  
  hc_add_series(name = 'Cumulative NP', yAxis = 1, id = 'pl_cum_line', data = data2, type = 'line', hcaes(x = DATA, y = CUM_SUM), events = list(
    legendItemClick = htmlwidgets::JS(
      "function(e) {
                      var shown = this.visible ? false : true;
                      this.update({visible: shown});
                      return false;
                    }"
    ))) %>%
  hc_add_series(name = "Cumulative NP",id = 'pl_cum_line_percent', data = data2, type = "line", hcaes(x = DATA, y = CUM_SUM),
                compare = 'percent', linkedTo = 'pl_cum_line', visible = F) %>% # <-- linked & invisible!) 
  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 = "Cumulative 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) {                     /* create y-axis tooltips with this function */
                        col = pts.color; y = pts.y; nm = pts.series.name;        /* collect color, y, name */
                        compVal = pts.series.linkedSeries[0].dataModify.compareValue;  /* 1st val in view */
                        delta = (y - compVal)/compVal * 100;   /* compute the comparison value as HC does */
                        adder = `(${delta.toFixed(2)}%)</span>`;   /* create remaining string for tooltip */
                        y = Highcharts.numberFormat(y, 0, '.', ' ');                 /* format y after calc */
                        return `<b><span style='color:${col};'>● ${nm}:</span></b> ${y} ` + adder;
                        }
                        xform = Highcharts.dateFormat('%B %e, %Y', this.x);        /* x-axis tooltip formatted */
                        ttd1 = pref(this.points[0]);                /* call function to create y-axis tooltips */
                        ttd2 = pref(this.points[1]);
                        return [xform, ttd1, ttd2];                                 /* send tooltip formatting */
                        }"
  )) %>%
  hc_exporting(enabled = TRUE)

绘制后的图表出现X轴标签偏移问题：X轴显示的标签为Apr 22, Jul 22, Oct 22, Jan 23，但最后一个数据点是2022年12月的数据，对应标签应该是Dec 22，整体需要将标签向右偏移，让标签与对应月份的数据点对齐。

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