javascript - 有什么方法可以在不悬停的情况下默认显示所有数据点?
问题描述
需要找出是否有任何方法可以显示开头本身的所有点而无需悬停。根据所选图例,需要显示所有数据点。
library(plotly)
library(tidyr)
library(plyr)
library(htmlwidgets)
data <- spread(Orange, Tree, circumference)
data <- rename(data, c("1" = "Tree1", "2" = "Tree2", "3" = "Tree3", "4" = "Tree4", "5" = "Tree5"))
fig <- plot_ly(data, x = ~age, y = ~Tree1, type = 'scatter', mode = 'lines', name = 'Tree 1')
fig <- fig %>% add_trace(y = ~Tree2, name = 'Tree 2')
fig <- fig %>% add_trace(y = ~Tree3, name = 'Tree 3')
fig <- fig %>% add_trace(y = ~Tree4, name = 'Tree 4')
fig <- fig %>% add_trace(y = ~Tree5, name = 'Tree 5')
fig <- fig %>% layout(legend = list(x = 0.1, y = 0.9))
fig
javascript <- "
var myPlot = document.getElementsByClassName('plotly')[0];
myPlot.on('plotly_hover', function(data) {
var hover = [];
for (var i = 0; i < data.points[0].data.x.length; i += 1) {
hover.push({curveNumber: data.points[0].curveNumber,
pointNumber: i});
}
Plotly.Fx.hover(myPlot, hover);
});"
fig <- htmlwidgets::prependContent(fig, onStaticRenderComplete(javascript), data = list(''))
fig
解决方案
这是一个基于 的解决方案add_text(...)
,不使用任何自定义 JS。您可能需要调整它以获得正确的外观和感觉。有必要使用legendgroup
和showlegend
参数来获得所需的行为。
fig <- plot_ly(data, x = ~age, y = ~Tree1, type = 'scatter', mode = 'lines+markers', name = 'Tree 1', legendgroup = 'Tree 1')
fig <- fig %>% add_text(y = ~Tree1, text = ~paste0("(", age, ", ", Tree1, ")"), legendgroup = 'Tree 1', showlegend=FALSE)
fig <- fig %>% add_trace(y = ~Tree2, name = 'Tree 2', legendgroup = 'Tree 2')
fig <- fig %>% add_text(y = ~Tree2, text = ~paste0("(", age, ", ", Tree2, ")"), legendgroup = 'Tree 2', showlegend=FALSE)
fig <- fig %>% add_trace(y = ~Tree3, name = 'Tree 3', legendgroup = 'Tree 3')
fig <- fig %>% add_text(y = ~Tree3, text = ~paste0("(", age, ", ", Tree3, ")"), legendgroup = 'Tree 3', showlegend=FALSE)
# etc for Trees 4 and 5
fig <- fig %>% layout(legend = list(x = 0.1, y = 0.9))
fig
推荐阅读
- mysql - 如何在 MySQL 中使用数组
- google-maps - 在运行地图时遇到问题,无一例外 googleMaps&Flutter
- javafx - 在窗格上测试 setOnKeyPressed 时,TestFX 不起作用
- reactjs - 反应 onClick 事件不起作用
- java - java中的RestAPI返回Json和CSR文件
- c# - 从 C# 中的 Xml 字符串中获取元素
- android - 无法弄清楚如何从片段开始()媒体播放
- node.js - NodeJS API 未在 Docker-compose 中与 PostgreSQL 通信
- node.js - 使用 firebase admin nodejs 记录事件
- typescript - 如何在给定的命名空间中设置“任何接口”类型?