如何在R的highcharter图表中添加非Shiny交互切换功能？

以下是纯前端（HTML/JS + Highcharter）的实现方案，通过下拉菜单或按钮切换total和perCapitaRate字段的展示，无需依赖Shiny框架：

完整RMarkdown代码 #

---
title: "Highcharter Y轴字段切换"
output: html_document
---

```{r setup, include=FALSE}
library(highcharter)
library(dplyr)

# 构造示例数据集（替换为你的真实数据）
set.seed(123)
date_seq <- seq.Date(as.Date("2023-01-01"), as.Date("2023-12-01"), by = "month")
data <- expand.grid(date = date_seq, category = c("类别1", "类别2", "类别3")) %>%
  mutate(
    total = sample(100:500, n(), replace = TRUE),
    perCapitaRate = round(total / sample(1000:5000, n(), replace = TRUE), 4)
  )

切换控件 #

highchart() %>%
  hc_chart(type = "line", id = "dynamicChart") %>%
  hc_xAxis(type = "datetime", categories = data$date %>% unique() %>% as.numeric() * 1000) %>%
  hc_yAxis(title = list(text = "总数值")) %>%
  hc_tooltip(pointFormat = "{series.name}: <b>{point.y}</b><br/>") %>%
  # 渲染total系列（默认显示）
  hc_add_series(
    data %>% filter(category == "类别1") %>% select(date, total) %>% rename(y = total),
    name = "类别1 - 总数值",
    visible = TRUE
  ) %>%
  hc_add_series(
    data %>% filter(category == "类别2") %>% select(date, total) %>% rename(y = total),
    name = "类别2 - 总数值",
    visible = TRUE
  ) %>%
  hc_add_series(
    data %>% filter(category == "类别3") %>% select(date, total) %>% rename(y = total),
    name = "类别3 - 总数值",
    visible = TRUE
  ) %>%
  # 渲染perCapitaRate系列（默认隐藏）
  hc_add_series(
    data %>% filter(category == "类别1") %>% select(date, perCapitaRate) %>% rename(y = perCapitaRate),
    name = "类别1 - 人均率",
    visible = FALSE
  ) %>%
  hc_add_series(
    data %>% filter(category == "类别2") %>% select(date, perCapitaRate) %>% rename(y = perCapitaRate),
    name = "类别2 - 人均率",
    visible = FALSE
  ) %>%
  hc_add_series(
    data %>% filter(category == "类别3") %>% select(date, perCapitaRate) %>% rename(y = perCapitaRate),
    name = "类别3 - 人均率",
    visible = FALSE
  )

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

## 核心逻辑说明
1. **数据准备**：提前构造包含`total`和`perCapitaRate`字段的数据集，替换为你的真实数据即可。
2. **图表初始化**：同时渲染两个字段的折线系列，默认只显示`total`系列，隐藏`perCapitaRate`系列。
3. **HTML控件**：添加下拉菜单作为切换入口，也可以换成按钮（代码示例见下方）。
4. **JavaScript交互**：
   - 通过图表ID找到Highcharts实例
   - 监听控件的切换事件，更新Y轴标题
   - 遍历所有系列，根据选中字段切换对应系列的可见性
   - 最后统一重绘图表，提升交互流畅度

## 按钮版切换控件（可选）
如果偏好按钮样式，替换上述HTML控件和JS代码为以下内容：

```html
<button id="btnTotal" style="margin-right: 8px; padding: 4px 8px; background: #007bff; color: white; border: none; border-radius: 4px;">总数值</button>
<button id="btnPerCapita" style="padding: 4px 8px; background: #6c757d; color: white; border: none; border-radius: 4px;">人均率</button>

const btnTotal = document.getElementById('btnTotal');
const btnPerCapita = document.getElementById('btnPerCapita');

// 切换逻辑封装
function switchYAxis(field) {
  // 更新Y轴标题
  chart.yAxis[0].update({
    title: { text: field === 'total' ? '总数值' : '人均率' }
  });
  
  // 切换系列可见性
  chart.series.forEach(series => {
    const shouldShow = field === 'total' 
      ? series.name.includes('总数值') 
      : series.name.includes('人均率');
    series.setVisible(shouldShow, false);
  });
  
  chart.redraw();
  
  // 更新按钮样式
  btnTotal.style.background = field === 'total' ? '#007bff' : '#6c757d';
  btnPerCapita.style.background = field === 'perCapitaRate' ? '#007bff' : '#6c757d';
}

// 绑定按钮点击事件
btnTotal.addEventListener('click', () => switchYAxis('total'));
btnPerCapita.addEventListener('click', () => switchYAxis('perCapitaRate'));

这样就完成了无Shiny的Y轴字段切换功能，所有交互都在前端完成，导出的HTML文件可以独立运行。