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

简介:

737abd95ac52a3de3e0de3083be50fa60b226fb1

3d251807855e8e6a3ba4bda418416478

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

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

86824b30fbb4e2453c234fd9f0fdfcd0

摘要

本演讲将介绍如何利用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”例子添加个性化样式。

gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAA26941f0f65a2aad78ad6a196163bfb69


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

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


给应用增加登录窗口

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

gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAA8b0c6a36ad6b10e1aefb5ce40d93e381


利用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结合。

ccb9e669a3dfafecd25fea37f9d3e0b2


我的分享到此结束,谢谢大家!

82b77b0520897a927ba27793378ebc3a

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

目录
相关文章
|
30天前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
|
30天前
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
|
9天前
|
搜索推荐 前端开发 JavaScript
html的head元素seo优化详解
在HTML的`<head>`元素中进行SEO优化对于提升网页在搜索引擎中的排名至关重要。以下是几个关键策略:确保每个页面有唯一的标题标签(50-60字符),使用描述标签(150-160字符)概括内容并包含关键词,设置正确的字符集(如UTF-8),使用视口元标签优化移动端显示,添加规范链接避免重复内容,利用结构化数据(如JSON-LD)帮助搜索引擎理解内容,优化样式和脚本加载,以及设置网站图标增强品牌识别。这些措施能显著提高网页的搜索引擎可见性和用户点击率。
|
11天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
23天前
|
数据安全/隐私保护
自定义密码访问跳转页面HTML源码
自定义密码访问跳转页面HTML源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
36 0
自定义密码访问跳转页面HTML源码
|
29天前
|
移动开发 HTML5
HTML5页面元素及属性
【8月更文挑战第23天】HTML5页面元素及属性。
33 4
|
30天前
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
|
30天前
|
前端开发 JavaScript
HTML+CSS助你轻松打造惊艳登录页,零基础也能学会!
HTML+CSS助你轻松打造惊艳登录页,零基础也能学会!
|
30天前
HTML+CSS 实现带轮播图的企业官网页面(记得收藏)
HTML+CSS 实现带轮播图的企业官网页面(记得收藏)
|
30天前
HTML+CSS 星空闪烁登录页面(记得收藏)
HTML+CSS 星空闪烁登录页面(记得收藏)