highcharter：在股票图中捕获当前选定的最小和最大日期

Question

我正在开发一个使用 highcharter pkg 进行数据可视化的 Shiny 应用程序。我想同步 2 个 highchart 绘图，以便当我更改一个绘图中的日期范围（使用绘图底部的范围选择器，而不是范围选择器按钮）时，第二个绘图也会应用它们。我读到了afterSetExtremes() JS 函数，它捕获了this SO answer 中建议的最小和最大日期（例如here），但我不确定如何将此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