Кликабельные очки всплывающие в Highcharter R Shiny - PullRequest
Новая
       6

Кликабельные очки всплывающие в Highcharter R Shiny

0 голосов
/ 06 сентября 2018

Вот мой вопрос. Можно ли повторить следующий пример из Highcharts в R Highchart? Идея состоит в том, чтобы ввести различный текст во всплывающем окне, которое появляется при выборе точки.

Пример здесь: 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/

Спасибо

1 Ответ

0 голосов
/ 08 октября 2018

Для всех интересующихся, вот решение проблемы выше. Я все еще работаю над решением для отображения графика с использованием функции "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.

Надеюсь, это полезно.

...