R语言apexcharter包rangeArea图tooltip格式化问题求助

以下是针对你遇到的三个问题的完整解决方案，包含可运行代码和关键细节说明：

# 加载依赖包
library(apexcharter)
library(dplyr)
library(purrr)

# 构造测试数据
set.seed(123)
date_seq <- seq.POSIXt(
  as.POSIXct("2024-01-01 00:00:00"), 
  as.POSIXct("2024-01-01 10:00:00"), 
  by = "hour"
)
test_data <- tibble(
  datetime = date_seq,
  min_flow = runif(length(date_seq), 5, 10),
  max_flow = runif(length(date_seq), 15, 20),
  median_flow = (min_flow + max_flow)/2
)

# 绘制修复后的rangeArea图
apex() %>%
  ax_chart(type = "rangeArea") %>%
  ax_series(
    # 流量范围系列
    list(
      name = "流量范围",
      data = map2(test_data$datetime, test_data$min_flow, function(x, y) {
        list(x = x, y = c(y, test_data$max_flow[test_data$datetime == x]))
      })
    ),
    # 中位数线系列（设置红色）
    list(
      name = "中位数流量",
      type = "line",
      data = map(test_data$datetime, function(x) {
        list(x = x, y = test_data$median_flow[test_data$datetime == x])
      }),
      color = "#ff0000"
    )
  ) %>%
  ax_xaxis(type = "datetime") %>%
  ax_tooltip(
    shared = TRUE,
    formatter = JS("function(val, opts) {
      // 格式化日期标题为yyyy-MM-dd HH:mm:ss
      const date = new Date(opts.globals.seriesX[opts.dataPointIndex]);
      const formattedDate = `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2,'0')}-${String(date.getDate()).padStart(2,'0')} ${String(date.getHours()).padStart(2,'0')}:${String(date.getMinutes()).padStart(2,'0')}:${String(date.getSeconds()).padStart(2,'0')}`;
      
      // 构建tooltip内容
      let tooltipContent = `<div class='apexcharts-tooltip-title'>${formattedDate}</div>`;
      opts.globals.series.forEach((series, idx) => {
        const dataPoint = series.data[opts.dataPointIndex];
        let valueText;
        // 区分rangeArea和line系列的数值显示
        if (series.type === 'rangeArea') {
          valueText = `${dataPoint.y[0].toFixed(2)} - ${dataPoint.y[1].toFixed(2)}`;
        } else {
          valueText = dataPoint.y.toFixed(2);
        }
        // 添加系列名称、数值和单位
        tooltipContent += `<div class='apexcharts-tooltip-series'>
          <span style='color:${series.color}'>●</span> ${series.name}: ${valueText} m³/s
        </div>`;
      });
      return tooltipContent;
    }")
  ) %>%
  ax_yaxis(title = list(text = "流量 (m³/s)"))

各问题的具体解决说明 #

• 中位数线显示红色：在中位数线的series配置中直接添加color = "#ff0000"，同时明确指定系列type = "line"，确保和rangeArea系列区分开。
• 启用共享tooltip：在ax_tooltip()中设置shared = TRUE，并在自定义formatter中通过opts.globals获取所有系列数据，适配共享tooltip的结构。
• 自定义tooltip格式：
  1. 通过opts.globals.seriesX获取当前hover的时间戳，转换为指定的日期格式；
  2. 遍历所有系列，根据类型（rangeArea/line）分别处理数值显示逻辑；
  3. 给数值添加单位m³/s，并用toFixed(2)保留两位小数优化显示；
  4. 保留apexcharts默认的tooltip样式结构，确保显示效果规整。

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