R语言dygraph绘图时如何实现鼠标指向序列的对应图例高亮？

dygraph包底层基于JavaScript的dygraphs库，原生没有提供图例同步高亮的封装，但我们可以通过注入自定义CSS和事件回调的方式实现需求，不需要依赖额外工具包，具体实现代码如下：

步骤1：示例数据赋值 #

dputvar <- structure(list(ts = structure(c(1636488540L, 1636488600L, 1636488660L, 
1636488720L, 1636488780L, 1636488840L, 1636488900L, 1636488960L, 
1636489020L, 1636489080L, 1636489140L), class = c("POSIXct", 
"POSIXt"), tzone = ""), x = c(-1.47069335096148, -3.36409786063375, 
-3.47740281050692, -0.255068206704506, 5.22759893683639, -10.3043374092728, 
-5.2344716901776, -9.78183898579815, -3.22880795465383, 10.605420513646, 
-3.89232017758796), y = c(-43.384448866304, -46.7485467269378, 
-50.2259495374447, -50.4810177441492, -45.2534188073128, -55.5577562165856, 
-60.7922279067632, -70.5740668925614, -73.8028748472152, -63.1974543335692, 
-67.0897745111571), z = c(-137.821501091824, -132.046751108584, 
-140.358945130686, -147.455514008532, -145.960386088907, -151.292192768048, 
-161.603402930662, -186.92405101591, -205.16916964654, -207.574396073346, 
-204.090103691941), fuel = c(852.178498908176, 857.953248891416, 
849.641054869314, 842.544485991468, 844.039613911093, 838.707807231952, 
828.396597069338, 803.07594898409, 784.83083035346, 782.425603926654, 
785.909896308058), delta = c(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0), 
    short = c(-8.8926709311977, 6.5109558655754, 5.24159847904127, 
    -3.34476928169295, -8.13888499708287, -19.2454416594633, 
    -21.2444577999751, -39.4685370073786, -59.2087835576331, 
    -56.2822033052981, -42.48670076128), long = c(-178.435062392844, 
    -179.31344224667, -187.306132052743, -185.62097109537, -176.874913772529, 
    -172.952666784266, -167.386770377762, -184.70364909417, -196.140010827552, 
    -194.056786969029, -182.415749904105)), row.names = c(NA, 
-11L), class = "data.frame")

步骤2：实现图例同步高亮的完整代码 #

library(data.table)
library(magrittr)
library(dygraphs)
library(htmltools)

# 自定义图例高亮样式，可按需调整边框、背景、字体等属性
highlight_css <- tags$style("
.dygraph-legend .highlight {
  border: 2px solid currentColor !important;
  border-radius: 3px;
  padding: 2px 4px;
  font-weight: bold;
  background-color: rgba(255,255,255,0.8);
}
")

# 绘制图表并绑定事件回调
dy_plot <- as.data.table(dputvar) %>% 
  dygraph() %>% 
  dySeries(name = "fuel",strokeWidth = 3) %>% 
  dyHighlight() %>% 
  # 注册高亮/取消高亮的JS回调
  dyCallbacks(
    highlightCallback = JS("
      function(e, x, points, row, seriesName) {
        // 先清除所有已有高亮
        document.querySelectorAll('.dygraph-legend .highlight').forEach(el => el.classList.remove('highlight'));
        // 匹配当前悬停系列对应的图例项添加高亮
        const legendItems = document.querySelectorAll('.dygraph-legend > span');
        for (let item of legendItems) {
          if (item.textContent.trim() === seriesName) {
            item.classList.add('highlight');
            break;
          }
        }
      }
    "),
    unhighlightCallback = JS("
      function(e) {
        // 鼠标移开后清除所有高亮
        document.querySelectorAll('.dygraph-legend .highlight').forEach(el => el.classList.remove('highlight'));
      }
    ")
  )

# 组合样式和图表输出
browsable(tagList(highlight_css, dy_plot))

效果说明 #

运行代码后，鼠标悬停任意折线时，对应图例项会自动添加和折线同色的边框、字体加粗，无需手动匹配颜色即可快速对应序列和图例，鼠标移开后自动恢复默认样式。如果需要调整高亮效果，直接修改highlight_css里的CSS属性即可。

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