如何仅在Plotly中鼠标悬停于数据点时更改光标样式？

要实现仅在悬停数据点时改变光标样式，我们可以借助htmlwidgets包给Plotly图表注入自定义JavaScript，监听悬停和离开事件来切换光标样式。

以下是修改后的完整代码：

library(shiny)
library(plotly)
library(htmlwidgets)  # 用于添加自定义JS

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      sliderInput("num_points", "数据点数量:", min = 2, max = 20, value = 10)
    ),
    mainPanel(
      plotlyOutput("line_plot")
    )
  )
)

server <- function(input, output, session) {
  output$line_plot <- renderPlotly({
    num_points <- input$num_points
    x <- 1:num_points
    y <- rnorm(num_points, mean = 5, sd = 2) 

    plot_ly(x = ~x, y = ~y, type = 'scatter', mode = 'lines+markers',
            line = list(color = 'blue'), marker = list(color = 'red', size = 10),
            hoverinfo = 'text', text = ~paste("X: ", x, "<br>Y: ", round(y, 2))) |>
      layout(
        title = "带数据点的折线图",
        xaxis = list(title = "X轴"),
        yaxis = list(title = "Y轴")
      ) |>
      # 添加自定义JS监听悬停事件
      onRender("
        function(el, x) {
          // 监听数据点悬停事件
          el.on('plotly_hover', function() {
            el.style.cursor = 'pointer';  // 悬停时设为指针光标
          });
          // 监听离开悬停事件
          el.on('plotly_unhover', function() {
            el.style.cursor = 'auto';  // 离开时恢复默认光标
          });
        }
      ")
  })
}

shinyApp(ui, server)

关键说明： #

• 先加载htmlwidgets包，它能帮我们给Plotly这类HTML小部件添加自定义JavaScript逻辑
• 通过onRender方法注入JS代码，监听两个核心事件：
  • plotly_hover：当鼠标悬停到数据点上时触发，此时把图表容器的光标设为pointer（指针样式）
  • plotly_unhover：当鼠标离开数据点时触发，恢复光标为默认的auto样式
• 你可以根据需求替换pointer为其他CSS光标值，比如crosshair（十字准星）、help（问号光标）等

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