目前似乎没有内置方法可以通过 plotly 直接传递附加属性来定义悬停外观(参见github issue #102)。但是,在问题描述中,您会看到用于悬停文本的类的名称,即.hovertext
. 最简单的解决方案是将您保存为 HTML 文件,并在<head>
HTML 部分的某处手动添加下面的 CSS。如果您还想更改图例文本的大小,请保留.legendtext
线条,如果不删除它们。
<style type="text/css">
.hovertext text {
font-size: 100px !important;
}
.legendtext {
font-size: 30px !important;
}
</style>
如果您想使用 R 注入 CSS 而不是手动注入,您有多种选择。
# the CSS we want to inject
css <- '
<style type="text/css">
.hovertext text {
font-size: 100px !important;
}
.legendtext {
font-size: 30px !important;
}
</style>'
library(plotly)
library(htmltools)
library(htmlwidgets)
1:创建后修改HTML文件
x <- as.widget(p) # convert to htmlwidget object
saveWidget(x, file="test_edited_1.html") # and save to file
l <- readLines("test_edited_1.html") # read file
h <- paste(l, collapse= " ")
hh <- strsplit(h, "<head>")[[1]] # split where head appears
h.new <- paste(hh[1], css, hh[-1], collapse=" ") # insert CSS
writeLines(h.new, "test_edited_1.html") # write back to file
2:修改创建HTML文件的对象
x <- as.widget(p) # convert to htmlwidget object
# add a the code directly into <head> using `htmltools::htmlDependency`
x$dependencies <- list(
htmlDependency(
name = "custom",
version="1",
src="",
head=css)
)
saveWidget(x, file="test_edited_2.html")
虽然第二个有效,但我不确定它是否正确使用htmlDependency
.
结果
