使用 Highcharts 的 Flexdashboards 和 Leaflet 以及 marker click
Flexdashboards and Leaflet and marker click with Highcharts
我正在尝试创建一个 flexdashboard,它使用 Leaflet 中的事件 (map_marker_click) 在同一页面的另一个图表中显示 highcharts 柱形图。我已经从其他示例中获取,但无法在 Flexdashboards 教程或示例中找到我正在寻找的内容。 This 非常接近我想要的,没有闪亮的输入或 plot.ly 集成和使用标记而不是多边形(更不用说继续)。
我在 R 中有以下用于 flexdashboard 的代码:
title: "Flexdashboards and Leaflet"
output:
flexdashboard::flex_dashboard:
vertical_layout: fill
runtime: shiny
---
```{r,include=FALSE}
library(flexdashboard)
library(shiny)
library(leaflet)
library(highcharter)
```
```{r,include=FALSE}
latitude<-c(35.94077, 35.83770, 35.84545, 35.81584, 35.79387, 36.05600)
longitude<-c(-78.58010, -78.78084, -78.72444, -78.62568, -78.64262,-78.67600)
amounts1<-c(27, 44, 34, 46, 25, 15)
amounts2<-c(34, 52, 35, 78, 14, 24)
ids<-c("a", "b", "c", "d", "e", "f")
df<-data.frame(ids,amounts1,amounts2,latitude,longitude)
renderLeaflet({
leaflet() %>%
addTiles() %>%
addMarkers(lng=c(longitude),lat=c(latitude))
})
observeEvent(input$map_marker_click,{
click<-input$map_marker_click
if(is.null(click))
return()
})
```
```{r}
renderHighchart({
highchart() %>%
hc_chart(type = 'column')%>%
hc_add_series(name=amounts1, data=click())
hc_add_series(name=amounts2, data=click())
})
```
我想知道这是否可以在有或没有闪亮集成的 flexdashboard 中完成。
下面的代码将完成它。简而言之,关键步骤是:
- 初始化地图时,请务必指定一列作为其
layerId
。这样,当您指定一个事件时,Leaflet 将知道 return 的值。
- 创建一个
eventReactive
,return 是那个 layerId
的值。然后,您可以根据需要使用它来对数据进行子集化以传递给图表。
- 我喜欢创建一个反应性数据框,它是基于单击
layerId
的主数据框的子集。你可以在不这样做的情况下编写应用程序,但我喜欢尽可能地将我的 Shiny 应用程序分成组件。
- 您现在可以在调用
renderHighchart
时使用此反应式数据框及其值
希望对您有所帮助!
---
title: "Flex Dashboard"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
runtime: shiny
---
```{r setup, include=FALSE}
library(flexdashboard)
library(shiny)
library(leaflet)
library(highcharter)
latitude<-c(35.94077, 35.83770, 35.84545, 35.81584, 35.79387, 36.05600)
longitude<-c(-78.58010, -78.78084, -78.72444, -78.62568, -78.64262,-78.67600)
amounts1<-c(27, 44, 34, 46, 25, 15)
amounts2<-c(34, 52, 35, 78, 14, 24)
ids<-c("a", "b", "c", "d", "e", "f")
df<-data.frame(ids,amounts1,amounts2,latitude,longitude)
```
Column {data-width=650}
-----------------------------------------------------------------------
```{r}
output$map <- renderLeaflet({
leaflet() %>%
addTiles() %>%
addMarkers(data = df, lng = longitude, lat = latitude,
layerId = ~ids)
})
leafletOutput('map')
```
Column {data-width=350}
-----------------------------------------------------------------------
```{r}
click_marker <- eventReactive(input$map_marker_click, {
x <- input$map_marker_click
return(x$id)
})
data_for_chart <- reactive({
return(df[df$ids == click_marker(), ])
})
output$chart <- renderHighchart({
highchart() %>%
hc_chart(type = 'column') %>%
hc_add_series(data = c(data_for_chart()$amounts1,
data_for_chart()$amounts2))
})
highchartOutput('chart')
```
我正在尝试创建一个 flexdashboard,它使用 Leaflet 中的事件 (map_marker_click) 在同一页面的另一个图表中显示 highcharts 柱形图。我已经从其他示例中获取,但无法在 Flexdashboards 教程或示例中找到我正在寻找的内容。 This 非常接近我想要的,没有闪亮的输入或 plot.ly 集成和使用标记而不是多边形(更不用说继续)。
我在 R 中有以下用于 flexdashboard 的代码:
title: "Flexdashboards and Leaflet"
output:
flexdashboard::flex_dashboard:
vertical_layout: fill
runtime: shiny
---
```{r,include=FALSE}
library(flexdashboard)
library(shiny)
library(leaflet)
library(highcharter)
```
```{r,include=FALSE}
latitude<-c(35.94077, 35.83770, 35.84545, 35.81584, 35.79387, 36.05600)
longitude<-c(-78.58010, -78.78084, -78.72444, -78.62568, -78.64262,-78.67600)
amounts1<-c(27, 44, 34, 46, 25, 15)
amounts2<-c(34, 52, 35, 78, 14, 24)
ids<-c("a", "b", "c", "d", "e", "f")
df<-data.frame(ids,amounts1,amounts2,latitude,longitude)
renderLeaflet({
leaflet() %>%
addTiles() %>%
addMarkers(lng=c(longitude),lat=c(latitude))
})
observeEvent(input$map_marker_click,{
click<-input$map_marker_click
if(is.null(click))
return()
})
```
```{r}
renderHighchart({
highchart() %>%
hc_chart(type = 'column')%>%
hc_add_series(name=amounts1, data=click())
hc_add_series(name=amounts2, data=click())
})
```
我想知道这是否可以在有或没有闪亮集成的 flexdashboard 中完成。
下面的代码将完成它。简而言之,关键步骤是:
- 初始化地图时,请务必指定一列作为其
layerId
。这样,当您指定一个事件时,Leaflet 将知道 return 的值。 - 创建一个
eventReactive
,return 是那个layerId
的值。然后,您可以根据需要使用它来对数据进行子集化以传递给图表。 - 我喜欢创建一个反应性数据框,它是基于单击
layerId
的主数据框的子集。你可以在不这样做的情况下编写应用程序,但我喜欢尽可能地将我的 Shiny 应用程序分成组件。 - 您现在可以在调用
renderHighchart
时使用此反应式数据框及其值
希望对您有所帮助!
---
title: "Flex Dashboard"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
runtime: shiny
---
```{r setup, include=FALSE}
library(flexdashboard)
library(shiny)
library(leaflet)
library(highcharter)
latitude<-c(35.94077, 35.83770, 35.84545, 35.81584, 35.79387, 36.05600)
longitude<-c(-78.58010, -78.78084, -78.72444, -78.62568, -78.64262,-78.67600)
amounts1<-c(27, 44, 34, 46, 25, 15)
amounts2<-c(34, 52, 35, 78, 14, 24)
ids<-c("a", "b", "c", "d", "e", "f")
df<-data.frame(ids,amounts1,amounts2,latitude,longitude)
```
Column {data-width=650}
-----------------------------------------------------------------------
```{r}
output$map <- renderLeaflet({
leaflet() %>%
addTiles() %>%
addMarkers(data = df, lng = longitude, lat = latitude,
layerId = ~ids)
})
leafletOutput('map')
```
Column {data-width=350}
-----------------------------------------------------------------------
```{r}
click_marker <- eventReactive(input$map_marker_click, {
x <- input$map_marker_click
return(x$id)
})
data_for_chart <- reactive({
return(df[df$ids == click_marker(), ])
})
output$chart <- renderHighchart({
highchart() %>%
hc_chart(type = 'column') %>%
hc_add_series(data = c(data_for_chart()$amounts1,
data_for_chart()$amounts2))
})
highchartOutput('chart')
```