javascript - 高宪章: capture currently selected min and max dates in stock plot

Question

我正在开发一个 Shiny 的应用程序，它使用 highcharter pkg 进行数据可视化。我想同步 2 个 highchart 图，这样当我更改一个图中的日期范围时(使用图底部的范围选择器，而不是范围选择器按钮)，第二个图也会应用它们。我阅读了 afterSetExtremes() JS 函数，该函数捕获 here 中建议的最小和最大日期(示例 this SO answer) ，但我不确定如何将此 JS 代码应用到我的 R/Shiny 代码。

下面是两个应该同步的 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)

感谢您的指点。

Answer 1

您可以使用 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