利用css对shiny页面优化及利用htmlwidgets包创建HTML控件

内容来源：2017年5月20日，乐逗游戏高级数据分析师在“第十届中国R会议软件工具专场”进行《HTTPS最佳安全实践》演讲分享。IT大咖说作为独家视频合作方，经主办方和讲者审阅授权发布。

阅读字数: 753 用时: 3分钟

摘要

本演讲将介绍如何利用CSS对shiny页面进行个性化设计及在网页中嵌入视频；并通过一个详细案例介绍了利用htmlwidgets包开发HTML控件，基于D3.JS库创建简单的交互桑基图，包括控件创建、函数修改、数据调用及与shiny结合的演示。

嘉宾演讲视频地址：t.cn/Ro89hHa

利用css对Shiny页面优化

添加CSS的三种方式

CSS为HTML文档提供了一种复杂外观的样式语言。由于Shiny应用程序用户界面（UI）是一个HTML文档，可以使用CSS来控制Shiny应用程序的外观。

要用CSS美化应用程序，常用的有三种方式。

1、创建一个样式表，把它放到www目录文件下：在应用的当前目录下，创建www文件夹，把CSS样式放在www目录里。对Shiny自带的“03_reactivity”例子添加个性化样式。

2、把CSS添加到HTML标题中。

3、将样式直接添加到HTML控件标签中：直接在用户界面中的单个HTML元素中添加CSS样式，优先级高于其他的CSS源。

给应用增加登录窗口

免费的Shiny没有权限控制，如果掌握一些基本的CSS知识，就可以轻易地给应用添加一个登录窗口。

利用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包进行安装。

运行treemap函数

构建简单数据框，运行treemap函数，查看效果。

与Rmarkdown结合

利用htmlwidgets包创建的控件，很容易与Rmarkdown和Shiny结合。

我的分享到此结束，谢谢大家！

相关推荐

推荐文章

百度外卖如何做到前端开发配置化

阿里巴巴前端专家渚薰：H5互动的正确打开方式

近期活动

直播 | 2017红象云腾大数据基础软件V5.0发布暨合作伙伴大会

点击【www.itdks.com】进入干货密道

利用css对shiny页面优化及利用htmlwidgets包创建HTML控件相关推荐

应用css div进行页面布局设计,利用CSS与DIV进行页面布局.ppt
<利用CSS与DIV进行页面布局.ppt>由会员分享,可在线阅读,更多相关<利用CSS与DIV进行页面布局.ppt(6页珍藏版)>请在人人文库网上搜索. 1.利用CSS与DIV ...
利用css特性布局页面制作京东特价框
布局技巧:利用css特性去制作京东价格图框: 类似步骤: 1.首先制作一个四边形的样式,对高度和宽度进行设置,两者设置为0px 2.原来制作一个四边形里面的一个三角形部分采取的是对颜色设置transp ...
Android:Socket客户端开发，Android 的Socket客户端优化，Android非UI线程修改控件程序崩溃的问题
一.Android:Socket客户端开发创建一个工程我们要做的是按下按键之后,去往服务器 (服务器) 或者我们自己写的服务器 ,给他发送一些预定好的东西然后打开操作界面然后修改一下你要发送 ...
优化DOTTEXT之二：缓存用户控件
这个方法,其实在DOTTEXT的一些ASCX文件里已经使用了,我们可以再根据自己的情况再增加或延长一些页面的缓存,如: Syndication.ascx,首页聚合:缓存时间:3600 BlogList ...
html页面tableview,用JS写的一个TableView控件代码
请看看编码是否规范,使用是否方便 HTML: 代码编号姓名 {value}{value} 编号名称 {value}{value} Javascript: 代码 //class TableView { ...
ASP.Net中利用CSS实现多界面两法
通过使页面动态加载不同CSS实现多界面方法一: <%@page language="C#"%> <%@import namespace="System ...
在ASP.Net中两种利用CSS实现多界面的方法（转）
通过使页面动态加载不同CSS实现多界面方法一: <%@page language="C#"%> <%@import namespace="System ...
利用tab_control控件在对话框中加入属性页的方法详细介绍
在对话框中加入属性页方案一在对话框上放置一个Tab Control的控件,再在对话框上放置所需的控件(本例放置了2个按钮,试图在每个标签中显示一个).然后利用Class Wizard来为Tab C ...
PyQt实现按钮控件的拖动效果，利用鼠标移动事件实现。
文章目录原理代码原理 1.利用mousePressEvent记录下鼠标按下时在控件上的相对位置: 2.利用mouseMoveEvent记录下鼠标移动中的位置,并且将控件移动到那个位置.不过要当心 ...