Fatal编程技术网
  • r/
  • 将R htmlwidget嵌入现有网页

将R htmlwidget嵌入现有网页

r

将R htmlwidget嵌入现有网页,r,htmlwidgets,R,Htmlwidgets,我正在尝试将一个R嵌入到一个现有的网页中——一个已经应用了引导和样式的网页。例如，考虑下面的网页（注意应该放置小部件）： 文件 这是一个测试 最后一段 我可以创建并保存一个小部件，如下所示： 库（htmlwidgets） 库（数据表） d1htmlwidget-包提供了一种方法，可以分别保存小部件的各个部分，如下所示： library(dygraphs) d1 <- dygraph(nhtemp, main = "New Haven Temperatures") %>% d

我正在尝试将一个
R
嵌入到一个现有的网页中——一个已经应用了引导和样式的网页。例如，考虑下面的网页（注意应该放置小部件）：


文件
这是一个测试

最后一段
我可以创建并保存一个小部件，如下所示：

库（htmlwidgets）
库（数据表）

d1htmlwidget
-包提供了一种方法，可以分别保存小部件的各个部分，如下所示：

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)

<!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>

<!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,49.4,47.9,49.8,50.9,49.3,51.9,50.8,49.6,49.3,50.6,48.4,50.7,50.9,50.6,51.5,52.8,51.8,51.1,49.8,50.2,50.4,51.6,51.8,50.9,48.8,51.7,51,50.6,51.7,51.5,52.1,51.3,51,54,51.4,52.7,53.1,54.6,52,52,50.9,52.6,50.2,52.6,51.6,51.9,50.5,50.9,51.7,51.4,51.7,50.8,51.9,51.8,51.9,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>
而
widget_file.html
的内容如下：

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)

<!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>

<!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,49.4,47.9,49.8,50.9,49.3,51.9,50.8,49.6,49.3,50.6,48.4,50.7,50.9,50.6,51.5,52.8,51.8,51.1,49.8,50.2,50.4,51.6,51.8,50.9,48.8,51.7,51,50.6,51.7,51.5,52.1,51.3,51,54,51.4,52.7,53.1,54.6,52,52,50.9,52.6,50.2,52.6,51.6,51.9,50.5,50.9,51.7,51.4,51.7,50.8,51.9,51.8,51.9,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>
如果您想使用纯JS解决方案，可以查看一下
小部件文件\u files/htmlwidgets-0.5/htmlwidgets.JS
-文件当前json数据的绑定方式

附言： 由于这个问题已经引起了很多注意，您也可以联系包开发人员，让他进一步“取消自包含”htmlwidgets:：：saveWidget：这意味着单独保存json数据并包括它，例如通过
jquery.getjson

，这是可能的。请参阅：。