Highcharter R Shiny中的Clickable Points彈出窗口

Question

這是我的問題。 是否可以從R Highchart中的Highcharts復制以下示例？ 想法是在選擇點時出現的彈出窗口中引入各種文本。

此處的示例： https : //jsfiddle.net/jnupf62x/

到目前為止，這是我嘗試過的：

data <- data.frame(x = c(1,2,3,4,5,6),
               y = c(2,4,1,5,2,6))

highchart() %>% 
  hc_add_series(data, "line") %>% 
  hc_tooltip(shared = T,
             crosshairs = T) %>% 
  hc_plotOptions(
    series = list(
      cursor = "pointer",
      point = list(
        events = list(click = JS("function () {
                                          hs.htmlExpand(null, {
                                          pageOrigin: {
                                          x: this.pageX,
                                          y: this.pageY
                                          },
                                          headingText: 'testing1',
                                          maincontentText: 'testing2',
                                          width: 310,
                                          height: 500
                                          });
                                          }")))
    ))

如果我們可以解決這個問題，那么也許我們可以做這樣的事情： http : //jsfiddle.net/y4JV5/4/

謝謝

Answer 1

對於所有感興趣的人，這里是上述問題的解決方案。 我仍在研究使用“ htmlExpand”功能顯示圖表的解決方案。 http://jsfiddle.net/y4JV5/4/

library(shiny)
library(highcharter)

data <- data.frame(x = c(1,2,3,4),
                   y = c(2,1,5,1))



js_func <- JS("function (event) {
                 hs.htmlExpand(null, {
                    pageOrigin: {
                      x: event.pageX || event.clientX,
                      y: event.pageY || event.clientY
                 },
                 headingText: event.point.series.name,
                 maincontentText:  'This point has coordinates: (' + event.point.x + ', ' + event.point.y + ')' , 
                 height: 100,
                 width: 250
             }); 
            }")

ui <- fluidPage(
   tags$head(HTML("\n<script src='https://www.highcharts.com/media/com_demo/js/highslide-full.min.js'></script>
             \n<script src='https://www.highcharts.com/media/com_demo/js/highslide.config.js' charset='utf-8'></script>
            \n<link rel='stylesheet' type='text/css' href='https://www.highcharts.com/media/com_demo/css/highslide.css'/>")),

   highchartOutput("a1")
)

server <- function(input, output){

  output$a1 <- renderHighchart({

   highchart() %>% 
     hc_add_series(data, "line", hcaes(x,y), name = "Sample Series") %>% 
     hc_plotOptions(series = list(
        cursor = "pointer",
        events = list(click = js_func)
     ))

 })

}

shinyApp(ui, server)

最困難的部分是將數據鏈接到“ hs.htmlExpand”部分。 僅使用event.point完成此操作。

希望這會有所幫助。