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

简介:



内容来源: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”例子添加个性化样式。


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


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


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

目录
相关文章
|
6天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
79 24
|
2月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
68 7
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
44 6
|
2月前
|
前端开发 UED 开发者
CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求,提升加载速度
本文探讨了CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求,提升加载速度;图标字体则以字体形式呈现图标,便于调整样式。文章分析了两者的优缺点及应用场景,并提供了应用技巧和注意事项,旨在帮助开发者提升页面性能,改善用户体验。
33 5
|
2月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
49 5
|
2月前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
40 5
|
2月前
|
编解码 前端开发 UED
探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
本文深入探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用。通过实际案例分析和注意事项的讨论,旨在帮助开发者更好地理解和运用媒体查询,提升移动端用户体验。
47 4
|
2月前
|
JavaScript
jQuery+css3制作精美的2024圣诞节倒计时页面
jQuery+css3制作精美的2024圣诞节倒计时页面动画
26 0
jQuery+css3制作精美的2024圣诞节倒计时页面
|
2月前
太便利了 !通义灵码方便生成html页面
太便利了 !通义灵码方便生成html页面
62 0
|
2月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
42 0