利用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进入干货密道

目录
相关文章
|
19天前
|
编解码 前端开发 UED
HTML多媒体格式支持与优化
在HTML中,多媒体格式的支持与优化至关重要。使用`<audio>`、`<video>`和`<img>`标签可分别嵌入音频、视频和图像。支持的格式包括MP3、OGG、JPEG等。为优化体验,应压缩文件、采用响应式设计、使用懒加载,并考虑转码及CDN托管。此外,添加字幕和描述文件可提高辅助功能。遵循这些最佳实践,能显著提升多媒体内容的加载速度与用户满意度。
|
24天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
16天前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
21 1
|
25天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代,拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识,一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解,这篇文章都将是你的理想指南。我们将探索基本概念,实现页面布局,并点缀以个性化样式,最终将静态页面转变为动态交互式网站。准备好了吗?让我们开始吧!
|
2天前
|
移动开发 HTML5
一个最简单的 HTML 页面结构如下:
HTML 是一种标记语言,用于描述网页结构。通过 `<html>`, `<head>`, `<body>` 等标签构建页面,支持文本、图像、链接、表格等多种元素。本文介绍了 HTML 基础,包括常用标签及创建简单网页的实例,帮助初学者快速入门。
18 0
|
27天前
|
移动开发 编解码 监控
HTML5 Video(视频)作为背景的优化方案
使用 HTML5 `<video>` 标签作为网页背景视频可以提升视觉效果,但需优化以确保性能和用户体验。主要方法包括:选择合适的视频格式(MP4、WebM、Ogg)和分辨率(720p 或更低),压缩文件大小,确保视频静音和循环播放,使用 CSS 设置全屏样式,根据设备和网络条件加载视频或静态图像,使用 `playsinline` 属性和延迟加载技术提高性能,确保无障碍性,并监控页面加载时间。合理应用背景视频可增强网站视觉效果而不影响用户体验。
|
28天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
35 6
|
28天前
|
存储 移动开发 定位技术
HTML5 Geolocation(地理定位)优化到最高精度
HTML5 Geolocation API 可让网页访问用户的地理位置信息。为优化地理定位精度,需考虑设备、浏览器设置、网络状况及编码实现。使用 `enableHighAccuracy` 选项请求高精度,并确保设备开启 GPS,网络良好。结合多种数据源(如 GPS、Wi-Fi)可提高准确性。利用 `watchPosition` 定期更新位置,并妥善处理定位错误。务必遵循用户隐私原则,获取同意并遵守相关法规。这样可有效提升地理定位的精度与用户体验。
|
28天前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
|
14天前
|
XML Web App开发 数据格式
HTML 页面显示 XML 数据
10月更文挑战第2天