htmlwidgets并排在html中？ [英] htmlwidgets side by side in html?

问题描述

假设我有两个htmlwidgets

 ＃载入能量投影数据
＃载入能量投影数据
库（networkD3）
 URL<  -  paste0（
https://cdn.rawgit.com/christophergandrud/networkD3/，
master / JSONdata / energy.json）
能源< -  jsonlite :: fromJSON（URL）
＃地块
 sankeyNetwork（链接=能源$链接，节点=能源$节点，来源=来源，
目标= target，Value =value，NodeID =name，
 units =TWh，fontSize = 12，nodeWidth = 30）
   
 
 $ b $ $ $ $ $ 
 
 $ b $ 
 
＃显示来自`quakes`数据集的前20行
 leaflet（data = quakes [1:20，]）％>％addTiles（）％>％
 addMarkers（〜long，〜lat，popup =〜as.character（mag））
  

把它们并排放在一个html页面中。我怎样才能做到这一点？我可以使用iframe吗？其他？

解决方案

有很多方法可以回答这个问题。通常，根据编写 htmlwidget 的人员，大小和位置会有所不同，因此您可能需要稍微尝试一下。如果你不打算在网格助手中使用 CSS 框架，最简单的方法是将每个 htmlwidget 包装到标记$ div（）并使用 CSS 。您也可能对RStudio中基于flexbox的新仪表板软件包感兴趣： http://github.com/rstudio/ flexdashboard 。

 ＃载入能量投影数据
＃载入能量投影数据
 library（ networkD3）
 URL<  -  paste0（
https://cdn.rawgit.com/christophergandrud/networkD3/，
master / JSONdata / energy.json）
能量< -jsonlite :: fromJSON（URL）
＃地块
 sn<  -  sankeyNetwork（链接=能量$链接，节点=能量$节点，源=源，
 Target =target，Value =value，NodeID =name，
 units =TWh，fontSize = 12，nodeWidth = 30，
 width =100％）
资料库（小册子）
数据（地震）
 
＃显示来自quakes数据集的前20行
 leaf<  -  leaflet（data = quakes [1:20， ]）％>％addTiles（）％>％
 addMarkers（〜long，〜lat，popup =〜as.character（mag））
 
 
 library（htmltools）
 browsable（
 tagList（list（
 tags $ div（
 style ='width：50％; display：block; float：left; '，
 sn 
），
 tags $ div（
 style ='width：50％; display：block; float：left;'，
 leaf 
）
））
）
  

Say I have two htmlwidgets

# Load energy projection data
# Load energy projection data
library(networkD3)
URL <- paste0(
        "https://cdn.rawgit.com/christophergandrud/networkD3/",
        "master/JSONdata/energy.json")
Energy <- jsonlite::fromJSON(URL)
# Plot
sankeyNetwork(Links = Energy$links, Nodes = Energy$nodes, Source = "source",
             Target = "target", Value = "value", NodeID = "name",
             units = "TWh", fontSize = 12, nodeWidth = 30)

and

library(leaflet)
data(quakes)

# Show first 20 rows from the `quakes` dataset
leaflet(data = quakes[1:20,]) %>% addTiles() %>%
  addMarkers(~long, ~lat, popup = ~as.character(mag))

And I want to put them side by side in an html page. How can I do this? Could I use an iframe? Other?

解决方案

There are lots of ways to answer this. Often sizing and positioning will vary based on who authored the htmlwidget, so you might need to experiment a little. The easiest way if you don't plan to use a CSS framework with grid helpers will be to wrap each htmlwidget in tags$div() and use CSS. You also might be interested in the very nice new flexbox-based dashboard package from RStudio http://github.com/rstudio/flexdashboard.

# Load energy projection data
# Load energy projection data
library(networkD3)
URL <- paste0(
  "https://cdn.rawgit.com/christophergandrud/networkD3/",
  "master/JSONdata/energy.json")
Energy <- jsonlite::fromJSON(URL)
# Plot
sn <- sankeyNetwork(Links = Energy$links, Nodes = Energy$nodes, Source = "source",
              Target = "target", Value = "value", NodeID = "name",
              units = "TWh", fontSize = 12, nodeWidth = 30,
              width = "100%")
library(leaflet)
data(quakes)

# Show first 20 rows from the `quakes` dataset
leaf <- leaflet(data = quakes[1:20,]) %>% addTiles() %>%
  addMarkers(~long, ~lat, popup = ~as.character(mag))


library(htmltools)
browsable(
  tagList(list(
    tags$div(
      style = 'width:50%;display:block;float:left;',
      sn
    ),
    tags$div(
      style = 'width:50%;display:block;float:left;',
      leaf
    )
  ))
)

这篇关于htmlwidgets并排在html中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！