利用css对shiny页面优化及利用htmlwidgets包创建HTML控件
2017-07-07 14:29
411 查看
摘要: 内容来源:2017年5月20日,乐逗游戏高级数据分析师在“第十届中国R会议软件工具专场”进行《HTTPS最佳安全实践》演讲分享。IT大咖说作为独家视频合作方,经主办方和讲者审阅授权发布。 阅读字数: 753 用时: 3分钟 摘要 本演讲将介绍如何利用CSS对shiny页面进行个性化设计及在网页中嵌入视频;并通过一个详细案例介绍了利用htmlwidgets包开发HTML控件,基于D3.JS库创建简单的交互桑基图,包括控件创建、函数修改、数据调用及与shiny结合的演示。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201707/7bc79ad0796de7c72a877d5f74c42818.jpeg)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201707/2106f28fc5863703bd629c3ead1a6c61)
内容来源:2017年5月20日,乐逗游戏高级数据分析师在“第十届中国R会议软件工具专场”进行《HTTPS最佳安全实践》演讲分享。IT大咖说作为独家视频合作方,经主办方和讲者审阅授权发布。
阅读字数: 753 用时: 3分钟
![](https://oscdn.geek-share.com/Uploads/Images/Content/201707/49945645dc382ae513e0f65e7458b3ce)
嘉宾演讲视频地址:http://t.cn/Ro89hHa
要用CSS美化应用程序,常用的有三种方式。
1、创建一个样式表,把它放到www目录文件下:在应用的当前目录下,创建www文件夹,把CSS样式放在www目录里。对Shiny自带的“03_reactivity”例子添加个性化样式。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201707/49020ffa81167c730fc69340f242e7e1.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201707/47a2b3cb9c0a582c15aa109c6625dacb)
2、把CSS添加到HTML标题中。
3、将样式直接添加到HTML控件标签中:直接在用户界面中的单个HTML元素中添加CSS样式,优先级高于其他的CSS源。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201707/612bfde80e77bb8e6ea4abdfe485bb6a.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201707/acff2bdcdfed4f38cfa42b8ddebb7c72)
Stylesheet是用来指定特定的CSS格式,此处不添加。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201707/f9894224a64a9670dc83ba7c89c51b29.png)
原文链接
![](https://oscdn.geek-share.com/Uploads/Images/Content/201707/7bc79ad0796de7c72a877d5f74c42818.jpeg)
内容来源:2017年5月20日,乐逗游戏高级数据分析师在“第十届中国R会议软件工具专场”进行《HTTPS最佳安全实践》演讲分享。IT大咖说作为独家视频合作方,经主办方和讲者审阅授权发布。
阅读字数: 753 用时: 3分钟
摘要
本演讲将介绍如何利用CSS对shiny页面进行个性化设计及在网页中嵌入视频;并通过一个详细案例介绍了利用htmlwidgets包开发HTML控件,基于D3.JS库创建简单的交互桑基图,包括控件创建、函数修改、数据调用及与shiny结合的演示。嘉宾演讲视频地址:http://t.cn/Ro89hHa
利用css对Shiny页面优化
添加CSS的三种方式
CSS为HTML文档提供了一种复杂外观的样式语言。由于Shiny应用程序用户界面(UI)是一个HTML文档,可以使用CSS来控制Shiny应用程序的外观。要用CSS美化应用程序,常用的有三种方式。
1、创建一个样式表,把它放到www目录文件下:在应用的当前目录下,创建www文件夹,把CSS样式放在www目录里。对Shiny自带的“03_reactivity”例子添加个性化样式。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201707/49020ffa81167c730fc69340f242e7e1.png)
2、把CSS添加到HTML标题中。
3、将样式直接添加到HTML控件标签中:直接在用户界面中的单个HTML元素中添加CSS样式,优先级高于其他的CSS源。
给应用增加登录窗口
免费的Shiny没有权限控制,如果掌握一些基本的CSS知识,就可以轻易地给应用添加一个登录窗口。![](https://oscdn.geek-share.com/Uploads/Images/Content/201707/612bfde80e77bb8e6ea4abdfe485bb6a.png)
利用htmlwidgets包创建HTML控件
下载d3plus.zip
利用htmlwidgets包调用d3plus.js库,生成交互式图表。创建新包
创建一个新包,包名为myd3plus,将会生成treemap.R、treemap.ymal和treemap.js三个文件。创建lib目录,存放js文件
将下载的d3plus.zip解压,把里面的文件d3.js和d3plus.js拷贝至htmlwidgets/lib目录下。修改treemap.ymal的文件配置
修改treemap.ymal的文件配置,该文件是用来设置控件依赖的js库。Stylesheet是用来指定特定的CSS格式,此处不添加。
修改treemap.R的文件配置
在treemap.R中,删除message=message命令,增加data=data命令。安装包
运行devtools::install()对myd3plus包进行安装。![](https://oscdn.geek-share.com/Uploads/Images/Content/201707/f9894224a64a9670dc83ba7c89c51b29.png)
原文链接
相关文章推荐
- 利用css对shiny页面优化及利用htmlwidgets包创建HTML控件
- HTML+CSS优化“文件选择”控件(<input type="file">)
- 用jQuery创建一个可编辑的SELECT下拉控件(HTML/CSS)
- HTML+CSS实现页面加载(变灰显示请稍等、页面控件不可用)
- 动态创建服务器控件,获取HTML输出(用于生成静态文件,简化页面,简化编程等)
- 利用html+css创建一个二级导航菜单
- HTML+CSS编写静态网站-33 创建Contact页面
- 利用HTML+CSS创建Form表单
- 用CSS/JS技巧优化HTML页面加载速度
- HTML中利用WebBrowser控件进行打印页面的控制
- 动态创建服务器控件,获取HTML输出(用于生成静态文件,简化页面,简化编程等)
- JS创建HTML控件并动态生成页面的写法
- 创建符合标准的、有语意的HTML页面——ASP.NET 2.0 CSS Friendly Control Adapters 1.0发布
- 利用JS动态创建html控件并在后台实现取值
- c# 利用webbrower控件打印html——实现打印页面设置
- 用CSS/JS技巧优化HTML页面加载速度
- 动态创建服务器控件,获取HTML输出(用于生成静态文件,简化页面,简化编程等)
- HTML&CSS项目创建(页面练习)
- 利用JS动态创建html控件并在后台实现取值
- 利用HTML+CSS创建Button