基于纯HTML/JS（htmlwidgets）实现绘图时的交互式数据列选择

需求回顾 #

• 数据集含1个时间列+约100个数值列
• 生成独立静态HTML文档，无需依赖Shiny（无需运行/部署服务器）
• 优先用复选框组实现列选择交互
• 绘图需支持缩放、鼠标悬停等交互特性（兼容dygraphs/plotly/ggplot2）
• 解决当前dygraphs全量绘制后难以对比特定图表的问题

方案一：Crosstalk + Dygraphs（保留同步交互） #

利用crosstalk包实现静态HTML中的控件与图表联动，结合dygraphs的时间序列交互特性，代码如下：

---
title: "动态选择时间序列 - Dygraphs版"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(crosstalk)
library(dygraphs)
library(htmltools)

# 生成模拟数据（100个数值列）
set.seed(42)
time_seq <- seq(as.POSIXct("2024-01-01"), as.POSIXct("2024-08-01"), by = "10 days")
value_cols <- lapply(1:100, function(i) {
  round(runif(length(time_seq), ifelse(i %% 3 == 0, 3, 0), ifelse(i %% 3 == 0, 5, 50)), ifelse(i %% 3 == 0, 2, 1))
})
mydata <- data.frame(Time = time_seq, do.call(cbind, value_cols))
names(mydata)[-1] <- paste0("Value", 1:100)

# 包装数据为Crosstalk可识别的SharedData对象
sd <- SharedData$new(mydata)

# 创建复选框组控件
col_checkboxes <- filter_checkbox(
  id = "col_selector",
  label = "选择要绘制的列",
  sharedData = sd,
  group = ~names(mydata)[-1],  # 排除时间列
  inline = FALSE,
  selected = "Value1"  # 默认选中第一列
)

# 自定义JS实现Dygraph动态更新
update_script <- tags$script(HTML("
document.addEventListener('DOMContentLoaded', function() {
  const checkboxes = document.querySelectorAll('#col_selector input');
  const dyContainer = document.getElementById('dy_plot');
  
  // 初始化Dygraph
  const initialCols = ['Time', 'Value1'];
  const rawData = HTMLWidgets.getData(dyContainer).x.data;
  let filteredData = rawData.map(row => initialCols.map(col => row[col]));
  
  let dyGraph = new Dygraph(dyContainer, filteredData, {
    group: 'time_group',
    rangeSelector: true,
    unzoomButton: true,
    crosshair: { direction: 'both' },
    labels: initialCols
  });
  
  // 监听复选框变化
  checkboxes.forEach(cb => {
    cb.addEventListener('change', () => {
      // 获取选中列名，强制包含时间列
      let selected = Array.from(checkboxes)
        .filter(el => el.checked)
        .map(el => el.value);
      selected.unshift('Time');
      
      // 过滤数据并更新图表
      filteredData = rawData.map(row => selected.map(col => row[col]));
      dyGraph.updateOptions({
        file: filteredData,
        labels: selected
      });
    });
  });
});
"))

# 页面布局：左侧复选框，右侧图表
bscols(
  width = c(3, 9),
  col_checkboxes,
  tags$div(id = "dy_plot"),
  update_script
)

### 方案优势
- 完全静态HTML，本地打开即可使用，无需任何服务器
- 复选框支持多选，动态更新图表，避免全量绘制的混乱
- 保留dygraphs的范围选择、十字线、同步缩放等核心交互
- 支持100+列的大规模数据，控件自动渲染所有列选项

---

## 方案二：Crosstalk + Plotly（支持ggplot2语法）
如果偏好ggplot2的绘图语法，可结合Plotly实现交互式绘图，代码如下：

```r
---
title: "动态选择时间序列 - Plotly版"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(crosstalk)
library(plotly)
library(tidyr)

# 生成模拟数据
set.seed(42)
time_seq <- seq(as.POSIXct("2024-01-01"), as.POSIXct("2024-08-01"), by = "10 days")
value_cols <- lapply(1:100, function(i) {
  round(runif(length(time_seq), ifelse(i %% 3 == 0, 3, 0), ifelse(i %% 3 == 0, 5, 50)), ifelse(i %% 3 == 0, 2, 1))
})
mydata <- data.frame(Time = time_seq, do.call(cbind, value_cols))
names(mydata)[-1] <- paste0("Value", 1:100)

# 转换为长格式（适配ggplot2）
mydata_long <- pivot_longer(mydata, -Time, names_to = "Variable", values_to = "Value")

# 包装为SharedData对象
sd <- SharedData$new(mydata_long, group = "Variable")

# 创建复选框组
var_checkboxes <- filter_checkbox(
  id = "var_selector",
  label = "选择要绘制的变量",
  sharedData = sd,
  group = ~Variable,
  inline = FALSE,
  selected = "Value1"
)

# 用ggplot2绘制基础图表，转成Plotly
base_plot <- ggplot(sd, aes(x = Time, y = Value, color = Variable)) +
  geom_line(linewidth = 0.8) +
  theme_minimal() +
  labs(x = "时间", y = "数值")

interactive_plot <- ggplotly(base_plot) %>%
  layout(
    dragmode = "zoom",
    hovermode = "x unified",
    legend = list(orientation = "h", y = -0.2)
  )

# 页面布局
bscols(width = c(3, 9), var_checkboxes, interactive_plot)

### 方案优势
- 用熟悉的ggplot2语法绘图，学习成本低
- Plotly提供更丰富的交互：框选缩放、悬停显示详细信息、图例切换
- 自动处理多变量的颜色区分，对比更直观
- 同样生成静态HTML，无需Shiny支持

---

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