highcharter: захват текущей выбранной минимальной и максимальной даты на складе - PullRequest
Новая
       45

highcharter: захват текущей выбранной минимальной и максимальной даты на складе

1 голос
/ 04 апреля 2019

Я разрабатываю приложение Shiny, которое использует highcharter pkg для данных vis.Я хочу синхронизировать 2 highchart графики, чтобы при изменении диапазона дат на одном графике (с использованием селектора диапазона в нижней части графика, а не кнопок выбора диапазона) их применил и второй график.Я читал о afterSetExtremes() функции JS, которая фиксирует минимальную и максимальную даты (пример здесь ), которая была предложена в этом SO-ответе , но я не уверен, как я могу применить этот JSкод моего R / блестящий код.

Ниже приведен простой пример двух highchart графиков, которые должны быть синхронизированы 

library(shiny)
library(highcharter)


data(fdeaths)
data(mdeaths)


ui <- fluidPage(
  highchartOutput('f_plot'),
  highchartOutput('m_plot')
)


server <- function(input, output, session) {

  output$f_plot <- renderHighchart(
    highchart(type = 'stock') %>% 
      hc_add_series(fdeaths)

  )

  output$m_plot <- renderHighchart(
    highchart(type = 'stock') %>% 
      hc_add_series(mdeaths) 
  )


}


shinyApp(ui, server)

Спасибо за любые указатели.

1 Ответ

1 голос
/ 04 апреля 2019

Вы можете использовать событие xAxis.events.afterSetExtremes для запуска функции, которая будет обновлять экстремумы второго графика каждый раз, когда мы меняем экстремумы первого графика.Конечно, вы можете адаптировать эту логику для изменения крайностей первого графика при перетаскивании второго или сделать то же самое с большим количеством диаграмм.

Это пример того, как сделать это в чистом JavaScript: https://jsfiddle.net/BlackLabel/yg50ue1c/

И здесь у вас есть реализация R: 

library(shiny)
library(highcharter)


data(fdeaths)
data(mdeaths)


ui <- fluidPage(
  highchartOutput('f_plot'),
  highchartOutput('m_plot')
)


server <- function(input, output, session) {

  output$f_plot <- renderHighchart(
    highchart(type = 'stock') %>% 
      hc_add_series(fdeaths) %>% 
      hc_xAxis(
        events = list(
          afterSetExtremes = JS("function(e) {
            Highcharts.charts[0].xAxis[0].setExtremes(e.min, e.max);
          }")
        )
      )
    )

  output$m_plot <- renderHighchart(
    highchart(type = 'stock') %>% 
      hc_add_series(mdeaths) %>% 
      hc_xAxis(
        events = list(
          afterSetExtremes = JS("function(e) {
            Highcharts.charts[1].xAxis[0].setExtremes(e.min, e.max);
          }")
        )
      )
  )

}


shinyApp(ui, server)

Обратите внимание, что Shiny немного отличается и меняет порядок диаграмм, поэтому второй экземпляр диаграммы можно найти здесь: Highcharts.charts [0], но первый здесь: Highcharts.charts [1] Интересно, какой порядок был бы, если бы у нас было больше графиков ...

Справочник по API: https://api.highcharts.com/highcharts/xAxis.events.afterSetExtremes https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

...