如何在 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)

但是，如果我们添加它并在Shiny-app 中使用highchart，那么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.com/docs/chart-concepts/labels-and-string-formatting#html-in-highcharts

当 useHTML 为 true 时，文本以 HTML 格式显示在图表顶部。 [...] 它（带有 useHTML 的标签）将始终放置在所有其他 SVG 内容之上。具体来说，工具提示可能会呈现在 useHTML 标签下方。从 Highcharts v6.1.1 开始，可以通过将 tooltip.outside 设置为 true 来避免这种情况。

所以解决办法是：

hc_tooltip(outside = TRUE) %>%

编辑： 在您闪亮的应用程序中，工具提示不是“不可见的”。它在那里，但在模态框下方（当您将鼠标悬停在靠近顶部边缘的点上时可见）。

当您将 tooltip.outside 设置为 true 时，工具提示是 Highcharts 容器之外的渲染器（在您的情况下，在 shiny-modal-wrapper 之外 容器）。我不知道闪亮，所以我不知道如何将工具提示容器移动到您的模态框中。

但是，我想出了这个解决方法。您可以将 tooltip.useHTML 设置为 true 而不是 tooltip.outside。您需要禁用默认样式并定义自己的样式。下面只是一个示例（值：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.com/highcharts/tooltip.pointFormat https://api.highcharts.com/highcharts/tooltip.useHTML