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

When useHTML is true, the text is laid out as HTML on top of the chart. [...] It (label with useHTML) will always be laid out on top of all other SVG content. Specifically the tooltip may be rendered below the useHTML label. Since Highcharts v6.1.1 this can be avoided by setting tooltip.outside to true.

所以解决方案是：

hc_tooltip(outside = TRUE) %>%

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

当您将 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

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

How to style text annotation using CSS in highchart

javascript

highcharts

shiny

shinyjs

r-highcharter