You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Plotly如何在y1、y2轴绘制两条迹线并保留高亮功能

双Y轴迹线+高亮交互实现方案

该需求可直接实现,你提供的示例代码仅需微调即可正常运行:原有代码因为在add_trace中设置了inherit = FALSE,导致全局定义的高亮配置没有被两个子迹线继承,才会出现高亮功能失效的问题。

修正后完整代码

library(plotly)

## 样例数据 ################
tmp <- data.frame(timestamp = structure(c(1632132000, 1632139200, 1632146400, 1632153600, 1632160800, 1632168000, 
                                          1632175200, 1632182400, 1632189600, 1632196800, 1632204000, 1632211200, 
                                          1632132000, 1632139200, 1632146400, 1632153600, 1632160800, 1632168000,
                                          1632175200, 1632182400, 1632189600, 1632196800, 1632204000, 1632211200), 
                                        class = c("POSIXct", "POSIXt"), tzone = "Europe/Berlin"), 
                  value = c(29.015, 25.724, 24.017, 25.118, 28.334, 30.408, 
                            32.046, 32.441, 29.463, 27.528, 24.136, 21.067, 27.352, 23.13, 
                            24.962, 24.558, 130.475, 148.465, 157.134, 149.983, 133.003, 
                            123.9, 117.334, 115.927), 
                  valuetype = c(rep("Type 1",12),rep("Type 2",12)),
                  route_name = rep("group 1", 24), 
                  value_color = c(rep("#e3a201", 12), rep("#FFBA00",12)))

## Plotly绘图 ###############
plot_ly(data = tmp) %>%
  highlight_key(~paste0(route_name, valuetype)) %>%
  ## 第一条迹线(左侧Y轴)###################
  add_trace(
    data = tmp[tmp$valuetype %in% unique(tmp$valuetype)[[1]],],
    x = ~timestamp, y = ~value,
    type = "scattergl", mode = "lines",
    name = ~paste(valuetype, route_name),
    color = ~I(value_color)) %>%
  ## 第二条迹线(右侧Y轴)###################
  add_trace(
    data = tmp[tmp$valuetype %in% unique(tmp$valuetype)[[2]],],
    x = ~timestamp, y = ~value,
    yaxis = "y2",
    type = "scattergl", mode = "lines",
    name = ~paste(valuetype, route_name),
    color = ~I(value_color)) %>%
  ## 布局配置 ###################
  plotly::layout(xaxis = list(title = "时间", type = "date"),
                 yaxis = list(side ="left", title = "Y轴标题"),
                 yaxis2 = list(side="right", overlaying = "y", title = "第二Y轴标题"),
                 margin = list(l=50,r=50,t=50,b=10),
                 legend = list(orientation = 'h', xanchor = 'center', x = 0.5, y = -0.2)) %>% 
    plotly::highlight(on = "plotly_hover", off = "plotly_doubleclick",
                      selected = attrs_selected(showlegend = FALSE))

不同数据集适配说明

如果两条迹线使用完全独立的不同数据集,只需保证两个数据集里都包含用于生成highlight_key的关联字段,分别给每个trace的data参数套上highlight_key即可,示例逻辑如下:

# 两个独立数据集
data1 <- 数据集1(含关联字段group_id)
data2 <- 数据集2(含关联字段group_id)

plot_ly() %>%
  add_trace(data = highlight_key(data1, ~group_id), x = ~x1, y = ~y1, type = 'scattergl', mode = 'lines') %>%
  add_trace(data = highlight_key(data2, ~group_id), x = ~x2, y = ~y2, yaxis = 'y2', type = 'scattergl', mode = 'lines') %>%
  layout(yaxis2 = list(side = 'right', overlaying = 'y')) %>%
  highlight(on = "plotly_hover")

内容的提问来源于stack exchange,提问作者SeGa

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.27 10:15:06