如何在highchart中使用CSS来设计文本注释的样式？

Question

我有下面的交互式绘图，使用 highchart js 图书馆与 R

library(highcharter)
set.seed(100)

Data = data.frame(x = round(rnorm(20) * 100, 2), y = round(rnorm(20) * 100, 2), z = letters[1:20])
hchart(Data, "scatter", hcaes(x, y))  %>%
hc_annotations(list(labelOptions = list(y = 35, x = 0, backgroundColor = 'rgba(0, 0, 0, 0)', borderColor = "rgba(0,0,0,0)"),
                    labels = list(list(point = list(x = 71, y = 55, xAxis = 0, yAxis = 0),
                                        style = list(color = '#6f6f6f', fontSize = 8),
                                        useHTML = TRUE,
                                        text = "<span style = 'width: 120px; height: 120px; background-color: rgba(0,0,0,.5)'>AAAA</span>"))))

我想把文本注释的风格改为 HTML/CSS 样式。但是，在上面的代码中，我看到的是 tooltips 是落在文字后面的，因此不清晰可见。然而，如果我把 useHTML = FALSE 那我就不能申请了 CSS 样式与文字。有什么办法可以让 tooltip 前面，给可视化更高的优先级？

@raf18seb补充说，我们应该增加-? hc_tooltip(outside = TRUE)

但是，如果我们加上这个并使用 highchart 之内 Shiny-app 然后 tooltips 变得看不见。下面就是这样一个 App -

library("shiny")
library("highcharter")
library(shinyjs)

Data1 = structure(list(x = c(15, 21, 71, 39, 34, -47, 67, 5, 1, -41, 
41, 6, 52, 84, 10, 67, -53, 15, 21, 51), y = c(-7, 75, 100, -67, 
52, 100, 100, -200, 0, -100, 28, 19, 100, 35, 39, 24, -73, 100, 
29, 81), z = c("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", 
"k", "l", "m", "n", "o", "p", "q", "r", "s", "t")), row.names = c(NA, 
-20L), class = "data.frame")

ui <- fluidPage(
  useShinyjs(),
  div(id = "Click", style = "height: 500px; width: 500px; background-color: rgba(0,0,0,.4)", HTML("Click Here"))
)

server = function(input, output) {
  onclick('Click', showModal(modalDialog(size = 'l', footer = NULL, easyClose = TRUE, highchartOutput("Result"))))

  output$Result = 
        renderHighchart({

            HighCharts_Plot =
                hchart(Data1, "scatter", hcaes(x, y)) %>%
                    hc_chart(plotBorderWidth = 1, plotBorderColor = '#b4b4b4') %>%
                    hc_annotations(list(labelOptions = list(y = 35, x = 0, backgroundColor = 'rgba(0, 0, 0, 0)', borderColor = "rgba(0,0,0,0)"),
                                        labels = list(list(point = list(x = (max(abs(range(Data1$x))) + 0)/2, y = 0, xAxis = 0, yAxis = 0),
                                                            style = list(color = '#6f6f6f', fontSize = 8),
                                                            useHTML = TRUE,
                                                            text = paste("<span style = '", "padding: 3px; background-color: rgba(0,0,0,.4)", "'>AAA  AAA  AAA  AAA  AAA  </span>", sep = ""))))) %>%
                    hc_tooltip(outside = TRUE) 
            HighCharts_Plot

        })

}

shinyApp(ui = ui, server = server)

任何指针什么是正确的解决方案将是高帮助。

Answer 1

答案在Highcharts文档中。https:/www.highcharts.comdocschart-conceptslabels-and-string-formatting#html-in-highcharts

当useHTML为真时，文本会以HTML的形式显示在图表的顶部。[...]它(带有useHTML的标签)将始终被放置在所有其他SVG内容的顶部。具体来说，工具提示可以呈现在useHTML标签的下方。自Highcharts v6.1.1以来，这可以通过将tooltip.outside设置为true来避免。

所以解决方案是。

hc_tooltip(outside = TRUE) %>%

编辑。在你的闪亮的应用程序中，tooltip并不是 "不可见 "的。它是存在的，但在模态框下（当你悬停在靠近顶部边缘的点上时可见）。

当你设置 工具提示.外部 到 真正然后，工具提示是在Highcharts容器之外的渲染器（在你的例子中，是在 shiny-modal-wrapper 容器）。) 我不懂shiny，所以我不知道如何将工具提示容器移到你的模式框中。

但是，我想到了这个变通方法。你可以设置 tooltip.useHTML 改为true，而不是 工具提示.外部. 你需要禁用一个默认的样式，并定义你自己的样式。下面只是一个例子（值：7），但你可以重现与原始工具提示相同的样式。

library("shiny")
library("highcharter")
library(shinyjs)

Data1 = structure(list(x = c(39, 15, 21, 71, 39, 34, -47, 67, 5, 1, -41, 
                             41, 6, 52, 84, 10, 67, -53, 15, 21, 51), y = c(0, -7, 75, 100, -67, 
                                                                            52, 100, 100, -200, 0, -100, 28, 19, 100, 35, 39, 24, -73, 100, 
                                                                            29, 81), z = c("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", 
                                                                                           "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u")), row.names = c(NA, 
                                                                                                                                                             -21L), class = "data.frame")

ui <- fluidPage(
  useShinyjs(),
  div(id = "Click", style = "height: 500px; width: 500px; background-color: rgba(0,0,0,.4)", HTML("Click Here"))
)

server = function(input, output) {
  onclick('Click', showModal(modalDialog(size = 'l', footer = NULL, easyClose = TRUE, highchartOutput("Result"))))

  output$Result = 
    renderHighchart({

      HighCharts_Plot =
        hchart(Data1, "scatter", hcaes(x, y)) %>%
        hc_chart(plotBorderWidth = 1, plotBorderColor = '#b4b4b4') %>%
        hc_annotations(list(labelOptions = list(y = 35, x = 0, backgroundColor = 'rgba(0, 0, 0, 0)', borderColor = "rgba(0,0,0,0)"),
                            labels = list(list(point = list(x = (max(abs(range(Data1$x))) + 0)/2, y = 50, xAxis = 0, yAxis = 0),
                                               style = list(color = '#6f6f6f', fontSize = 8),
                                               useHTML = TRUE,
                                               text = paste("<span style = '", "padding: 3px; background-color: rgba(0,0,0,.4)", "'>AAA  AAA  AAA  AAA  AAA  </span>", sep = ""))))) %>%
        hc_tooltip(useHTML = TRUE, padding = 0, headerFormat = '', pointFormat = '<span style="padding: 5px; background: #f7f7f7;">Value: {point.y}<span>')
      HighCharts_Plot

    })

}

shinyApp(ui = ui, server = server)

API参考。https:/api.highcharts.comhighchartstooltip.pointFormat。https:/api.highcharts.comhighchartstooltip.useHTML。