Rshiny高图内的工具提示内容 [英] Tooltip content within a highchart in Rshiny

问题描述

大家下午好:)，

我在Rshiny图表的高图内的工具提示有一个小问题.我在一个简化的示例中重现了该问题，需要"highchart"和"shiny"库.这是代码:

I have a little problem with a tooltip within a highchart on a Rshiny chart. I reproduced the problem in a simplified example, requiring 'highchart' and 'shiny' librairies. Here is the code :

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

data(citytemp)

ui <- fluidPage(
    h1("Highcharter EXAMPLE"),
    fluidRow(
        column(width = 8,
               highchartOutput("hcontainer",height = "500px")
        )
    )
)

server = function(input, output) {
    data = data[,c("month","tokyo","new_york")]
    output$hcontainer <- renderHighchart({
      hc <-  highchart() %>% 
            hc_chart(type = "line") %>% 
            hc_title(text = "Monthly Average Temperature for TOKYO") %>% 
            hc_subtitle(text = "Source: WorldClimate.com") %>% 
            hc_xAxis(categories = c('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec')) %>% 
            hc_yAxis(title = list(text = "Temperature (C)")) %>% 
          hc_tooltip(pointFormat = '<span style="color:{series.color}">As for NY: </span>:
                       <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
                     followPointer=TRUE,
                     shared = TRUE)%>% 
            hc_plotOptions(line = list(
                dataLabels = list(enabled = TRUE),
                enableMouseTracking = FALSE)
            ) %>% 
            hc_series(
                list(
                    name = "Tokyo",
                    data = data$tokyo))      
        hc

    })

}

shinyApp(ui = ui, server = server)

我对工具提示有疑问，我不明白为什么它不起作用?它在启动时不会出现在应用程序上.另外，我希望工具提示包含另一个系列(在纽约)的数据-可行还是工具提示只能参考图表上的线?非常感谢您的帮助 ！祝一切顺利，疯了

I have a problem with the tooltip, I cannot understand why it does not work ? It does not appear on the app while launched. Also, I would like the tooltip to contain the data from another series (here New york) - is that feasible or the tooltip can only refer to the line on the chart ? thank you very much for your help ! All the best, madzia

推荐答案

在示例中将绘图选项 enableMouseTracking 设置为 TRUE 时，将显示工具提示.

When you set the plot option enableMouseTracking to TRUE in your example, the tooltips appear.

根据这篇文章，我还使用javascript编辑了工具提示，以使共享数据可访问: https://stackoverflow.com/a/19315076

I also editied the tooltip with javascript to make the shared data accessible, according to this post: https://stackoverflow.com/a/19315076

这对您有帮助吗?:)

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

data(citytemp)

ui <- fluidPage(
  h1("Highcharter EXAMPLE"),
  fluidRow(
    column(width = 8,
           highchartOutput("hcontainer",height = "500px")
    )
  )
)

server <- function(input, output) {
  data <- citytemp[,c("month","tokyo","new_york")]
  output$hcontainer <- renderHighchart({
    hc <-  highchart() %>% 
      hc_chart(type = "line") %>% 
      hc_title(text = "Monthly Average Temperature for TOKYO") %>% 
      hc_subtitle(text = "Source: WorldClimate.com") %>% 
      hc_xAxis(categories = c('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                              'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec')) %>% 
      hc_yAxis(title = list(text = "Temperature (C)")) %>% 
      hc_series(
        list(
          name = "Tokyo",
          data = data$tokyo),
        list(
          name = "New York",
          data = data$new_york)
        )   %>%
      hc_tooltip(
formatter = JS("function() {

    var s = [];

    $.each(this.points, function(i, point) {
        s.push('<span style=\"color:' + point.series.color + ';font-weight:bold;\">' + point.series.name + ' : ' + point.y + '<span>');
    });

    if (this.points.length === 2) {
        s.push('<span>Second point is ' + Math.round((this.points[1].y / this.points[0].y) * 100) + '% of first point.</span>');

    }

    return s.join('<br/>');

}"),
                followPointer=TRUE,
                 shared = TRUE) %>% 
      hc_plotOptions(line = list(
        dataLabels = list(enabled = TRUE),
        enableMouseTracking = TRUE
        )
      )
    return(hc)
  })
} 

shinyApp(ui = ui, server = server)

这篇关于Rshiny高图内的工具提示内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！