将R htmlwidget嵌入现有网页
发布时间：2020-12-14 21:40:07 所属栏目：资源 来源：网络整理
导读：我正在尝试将R htmlwidget 嵌入现有的网页 – 已经应用了引导和样式的网页。例如，考虑以下网页(注意应放置小部件的位置)： !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleDocument/title/headbody pThis is a test./p !-- htmlwidget should
|
我正在尝试将R
htmlwidget嵌入现有的网页 – 已经应用了引导和样式的网页。例如，考虑以下网页(注意应放置小部件的位置)：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p>This is a test.</p> <!-- htmlwidget should go here. --> <p>A closing paragraph.</p> </body> </html> 我可以创建并保存一个 library(htmlwidgets) library(datatable) d1 <- datatable(mtcars,filter = "top") saveWidget(d1,file = "widget_file.html") 生成的widget_file.html(即使是这个适度的小部件)包含很多代码。有没有一种简单的方式将其嵌入现有的网页/模板？ 我已经使用< iframe src =“widget_file.html”>但我想知道是否有更好的方法？此外，有没有办法从widget_file.html中分离片段/依赖关系(例如json数据)，以便它们可以放置在其他文件夹中？ 注意：我创建了htmlwidget标签，但我相信应该有一个同义的htmlwidgets标签。 解决方法
htmlwidget-Package提供了一种方法来单独保存小部件，如下所示：
library(dygraphs)
d1 <- dygraph(nhtemp,main = "New Haven Temperatures") %>%
dyRangeSelector(dateWindow = c("1920-01-01","1960-01-01"))
saveWidget(d1,file = "widget_file.html",selfcontained = FALSE)
这导致以下文件/目录： widget_file.html
widget_file_files
/dygraphs-1.1.1
..
/dygraphs-binding-0.6
..
/htmlwidgets-0.5
..
/jquery-1.11.1
..
/moment-2.8.4
..
/moment-timezone-0.2.5
..
而widget_file.html的内容如下所示： <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="widget_file_files/htmlwidgets-0.5/htmlwidgets.js"></script>
...
<script src="widget_file_files/dygraphs-binding-0.6/dygraphs.js"></script>
</head>
<body style="background-color:white;">
<div id="htmlwidget_container">
<div id="htmlwidget-2956" style="width:960px;height:500px;" class="dygraphs"></div>
</div>
<!-- THE JSON DATA -->
<script type="application/json" data-for="htmlwidget-2956">
{THE JSON DATA YOU WERE LOOKING FOR}
</script>
<!-- THE JSON DATA -->
<script type="application/htmlwidget-sizing" data-for="htmlwidget-2956">{Widget-Styling-Json}
</script>
</body>
</html>
所以你可以编辑你的html，如下所示： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- Begin of scripts to run the widget -->
<script src="widget_file_files/htmlwidgets-0.5/htmlwidgets.js"></script>
<script src="widget_file_files/jquery-1.11.1/jquery.min.js"></script>
<link href="widget_file_files/dygraphs-1.1.1/dygraph.css" rel="stylesheet" />
<script src="widget_file_files/dygraphs-1.1.1/dygraph-combined.js"></script>
<script src="widget_file_files/moment-2.8.4/moment.js"></script>
<script src="widget_file_files/moment-timezone-0.2.5/moment-timezone-with-data.js"></script>
<script src="widget_file_files/dygraphs-binding-0.6/dygraphs.js"></script>
<!-- End of scripts to run the widget -->
<!-- Begin Widget styling -->
<script type="application/htmlwidget-sizing" data-for="htmlwidget-2956">{"viewer":{"width":450,"height":350,"padding":10,"fill":true},"browser":{"width":960,"height":500,"padding":40,"fill":true}}</script>
<!-- End widget Styling -->
<!-- Begin Data for the widget-->
<script type="application/json" data-for="htmlwidget-2956">{"x":{"attrs":{"title":"New Haven Temperatures","labels":["year","V1"],"legend":"auto","retainDateWindow":false,"axes":{"x":{"pixelsPerLabel":60}},"showRangeSelector":true,"dateWindow":["1920-01-01T00:00:00Z","1960-01-01T00:00:00Z"],"rangeSelectorHeight":40,"rangeSelectorPlotFillColor":" #A7B1C4","rangeSelectorPlotStrokeColor":"#808FAB","interactionModel":"Dygraph.Interaction.defaultModel"},"scale":"yearly","annotations":[],"shadings":[],"events":[],"format":"date","data":[["1912-01-01T00:00:00Z","1913-01-01T00:00:00Z","1914-01-01T00:00:00Z","1915-01-01T00:00:00Z","1916-01-01T00:00:00Z","1917-01-01T00:00:00Z","1918-01-01T00:00:00Z","1919-01-01T00:00:00Z","1920-01-01T00:00:00Z","1921-01-01T00:00:00Z","1922-01-01T00:00:00Z","1923-01-01T00:00:00Z","1924-01-01T00:00:00Z","1925-01-01T00:00:00Z","1926-01-01T00:00:00Z","1927-01-01T00:00:00Z","1928-01-01T00:00:00Z","1929-01-01T00:00:00Z","1930-01-01T00:00:00Z","1931-01-01T00:00:00Z","1932-01-01T00:00:00Z","1933-01-01T00:00:00Z","1934-01-01T00:00:00Z","1935-01-01T00:00:00Z","1936-01-01T00:00:00Z","1937-01-01T00:00:00Z","1938-01-01T00:00:00Z","1939-01-01T00:00:00Z","1940-01-01T00:00:00Z","1941-01-01T00:00:00Z","1942-01-01T00:00:00Z","1943-01-01T00:00:00Z","1944-01-01T00:00:00Z","1945-01-01T00:00:00Z","1946-01-01T00:00:00Z","1947-01-01T00:00:00Z","1948-01-01T00:00:00Z","1949-01-01T00:00:00Z","1950-01-01T00:00:00Z","1951-01-01T00:00:00Z","1952-01-01T00:00:00Z","1953-01-01T00:00:00Z","1954-01-01T00:00:00Z","1955-01-01T00:00:00Z","1956-01-01T00:00:00Z","1957-01-01T00:00:00Z","1958-01-01T00:00:00Z","1959-01-01T00:00:00Z","1960-01-01T00:00:00Z","1961-01-01T00:00:00Z","1962-01-01T00:00:00Z","1963-01-01T00:00:00Z","1964-01-01T00:00:00Z","1965-01-01T00:00:00Z","1966-01-01T00:00:00Z","1967-01-01T00:00:00Z","1968-01-01T00:00:00Z","1969-01-01T00:00:00Z","1970-01-01T00:00:00Z","1971-01-01T00:00:00Z"],[49.9,52.3,49.4,51.1,47.9,49.8,50.9,49.3,51.9,50.8,49.6,50.6,48.4,50.7,51.5,52.8,51.8,50.2,50.4,51.6,48.8,51.7,51,52.1,51.3,54,51.4,52.7,53.1,54.6,52,52.6,50.5,53]]},"evals":["attrs.interactionModel"]}</script>
<!-- End Data for the widget-->
</head>
<body>
<p>This is a test.</p>
<div id="htmlwidget_container">
<div id="htmlwidget-2956" style="width:960px;height:500px;" class="dygraphs"></div>
</div>
<p>A closing paragraph.</p>
</body>
</html>
这将使您在html文档中硬编码的json数据(请参阅我的)。 json_dat <- readLines("widget_file.html")[18]
cat(sub("</script>","",sub('<script type="application/json" data-for=.*">',json_dat)),file = "./widget_file_files/my_data.json")
将json数据保存为./widget_file_files/my_data.json，然后将其加载到html中。如果你使用PHP，你可以做： <script type="application/json" data-for="htmlwidget-2956">
<?php include('widget_file_files/my_data.json'); ?>
</script>
如果要使用纯JS解决方案，可以看看http://api.jquery.com/jquery.getjson/和widget_file_files / htmlwidgets-0.5 / htmlwidgets.js-File如何在当前绑定json数据… P.S：由于这个问题已经得到很多关注，您还可以联系包开发人员，并要求他进一步“un-selfcontain”htmlwidgets ::: saveWidget中的“selfcontained”选项：分别保存json数据并包括它的含义。通过jquery.getjson （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |