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

Question

我正在开发一个使用 highcharter pkg 进行数据可视化的 Shiny 应用程序。我想同步 2 个 highchart 图，这样当我更改一个图中的日期范围时（使用图底部的范围选择器，而不是范围选择器按钮），第二个图也会应用它们。我读到了 afterSetExtremes() 捕获最小和最大日期的 JS 函数（示例 here ) that was suggested in 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

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

highcharter: capture currently selected min and max dates in stock plot

javascript

r

highcharts

shiny

r-highcharter