js实现表格任意框选_[R] 在表格中插入图形 - formattable + htmlwidgets
效果如下图(1980 - 2019年各国数据总览)
关于本例用到的package
renkun-ken/formattablegithub.com
htmlwidgets/sparklinegithub.com
- formattable和DT实际是类似的,本例用DT也可实现,只是前者弄起来更省心,效果更简洁
- htmlwidgets提供了更强大的功能,让我们可以组合各种组件,其实说白了,可视化package最终生成的也就是JS,html code,所以也可以将ggplot2和formattable组合起来
- sparkline是jquery的一款插件,个头小,非常适合在表格这种逼仄环境下使用,它提供了line, bar, pie, tristate, discrete, bullet, box七种绘图方式,且有hover text,只是修改比较难
适用场景
本例所展示的内容信息量是巨大的,这是最大的优点,比如可以将所有股票的走势图(line)放进表格中,又或是将球队赛季所有比赛的胜负(tristate)以及得失球(bar)放入表格中
当然也有缺点就是没有坐标轴,也就是说无法看到更细节的东西
因此,最适合展示的是数据的趋势,比如多年来各国人均GDP是否都在上升?CPI走势如何?基础建设投资是否逐年上升?等等...... 最令人兴奋的是只需要一张小小的表格就可以展示所有的信息,太赞了
代码
library(dplyr)
library(purrrlyr)
library(formattable)
library(sparkline)gen_spkline <- function(df, name, type = 'line', lclr = '', fclr = '') {expr = paste0("select(df, LOCATION, Value, TIME) %>%filter(TIME >= '1980') %>%group_by(LOCATION) %>%arrange(TIME) %>%summarise('",name,"' = htmltools::as.tags(sparkline(as.numeric(Value), type = '",type,ifelse(type == 'bar', "', barColor = '", "', lineColor = '"),lclr,ifelse(type == 'bar', "', negBarColor = '", "', fillColor = '"),fclr,"', width = 100)) %>% as.character)")return(eval(parse(text = expr)))
}gen_plot <- function(df) {df <- merge(df, ctrs, all.x = T) %>%filter(!is.na(cn)) %>%select(国家 = cn, 2:ncol(df))df[is.na(df)] <- ''wgt <- as.htmlwidget(formattable(df,align = "l",list(area(col = 1) ~formatter("span",style = ~ style(color = "#223344","font-weight" = "bold","font-family" = '微软雅黑')))))wgt$dependencies = c(out$dependencies,htmlwidgets:::widget_dependencies("sparkline", "sparkline"))return(wgt)
}
- 通过gen_spkline()函数将sparkline的html代码(字符串)写入data.frame
- gen_plot()函数生成htmlwidget直接显示
比如GDP的数据如下:
经过gen_spkline()转换后:
拿中间一笔数据展开:
<span id="htmlwidget-87b2c81375ea83ee4bf4" class="sparkline html-widget"></span>n<script type="application/json" data-for="htmlwidget-87b2c81375ea83ee4bf4">{"x":{"values":[2393.130563,2589.991464,2768.962578,2961.39133,3212.440198,3361.649639,3576.374986,3701.51812,3826.159388,3862.229627],"options":{"type":"line","lineColor":"gray","fillColor":"greenyellow","height":20,"width":100},"width":100,"height":20},"evals":[],"jsHooks":[]}</script>
可见通过span来组合行内元素,数据以json格式存储
----------
fmt <- formattable(df,align = "l",list(area(col = 1) ~formatter("span",style = ~ style(color = "#223344","font-weight" = "bold","font-family" = '微软雅黑'))))
formattable转换后就是纯html代码,<table>就是一个表格
as.htmlwidget()会创建htmlwidget类的实例,将fmt放入x,再把sparkline加入dependence,其内部大概的样子如下:
另外再附上一个更通用的例子:
gen_spark <- function(vect, ptype = 'line') {as.character(htmltools::as.tags(sparkline(vect, type = ptype)))
}df1 <- data.frame(a = gen_spark(sample(3), 'pie'),b = gen_spark(sample(15), 'bar'),c = gen_spark(sample(20), 'box'),d = gen_spark(sample(25), 'discrete'),e = gen_spark(sample(rep(-1:1, 10)), 'tristate'),f = gen_spark(sample(50), 'line'),stringsAsFactors = F
)df2 <- data.frame(type = c(gen_spark(sample(3), 'pie'),gen_spark(sample(15), 'bar'),gen_spark(sample(20), 'box'),gen_spark(sample(25), 'discrete'),gen_spark(sample(rep(-1:1, 10)), 'tristate'),gen_spark(sample(50), 'line')),stringsAsFactors = F
)gen_wgt <- function(df) {wgt <- as.htmlwidget(formattable(df))wgt$dependencies = c(out$dependencies,htmlwidgets:::widget_dependencies("sparkline", "sparkline"))return(wgt)
}
gen_wgt(df1)效果如下:
gen_wgt(df2)效果如下:
本专栏只生产干货,喜欢请关注:
数据及可视化zhuanlan.zhihu.com
js实现表格任意框选_[R] 在表格中插入图形 - formattable + htmlwidgets相关推荐
- 表格在整个html居中显示,html 表格字符居中显示_如何在HTML中居中显示表格?
html 表格字符居中显示_如何在HTML中居中显示表格? html 表格字符居中显示_如何在HTML中居中显示表格? html 表格字符居中显示 HTML table provides the ab ...
- latex里图片大小如何调整_怎样用latex修改插入图形的大小,使图形大小一致。...
2011-08-12 回答 很长时间没更新了,其实期间也有很多感触,就是没心情去留下痕迹.最近面临毕业,很是头疼.又面临发表论文,如果要发到国外期刊,需要用latex编辑.以前只用word,觉得挺好, ...
- js小球与边框碰撞反弹_四叉树在碰撞检测中的应用
缘起 <你被追尾了>中预告了加速碰撞检测的算法--四叉树(for 2D),所以本文就来学习一下. 分析 首先是为什么要使用四叉树进行优化,其实<你被追尾了>中已经说了,这里简单 ...
- word删除任意单个字符_如何从Word中的单个页面中删除页眉或页脚
word删除任意单个字符 You can remove or make changes to headers or footers on any page in Microsoft Word. Thi ...
- excel添加列下拉框票价_如何在excel中设置下拉菜单
excel是日常办公中应用非常多的办公软件之一,其强大的数据统计.分析功能为工作带来不少方便.在EXCEL中设置下拉菜单,以方便输入相同内容.本文就以将性别设置为下拉菜单为例,介绍在excel中设置下 ...
- 合并的表格怎么加横线_如何在excel中文字后面加横线
如何在excel中文字后面加横线以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 如何在excel中文字后面加横线 好办啊 ...
- ai中如何插入签名_如何在PDF中插入一个或多个空白页?
在编辑或修改PDF文档时,一般都需要新增空白页后再添加文本或图片等内容,那么如何在PDF中插入一个或多个空白页呢? 首先打开极速PDF编辑器,或打开需要编辑的PDF文档后,点击右上角"文档& ...
- ai中如何插入签名_怎么将CAD中插入图片的多余部分抠掉?如何设置透明效果?...
下面是本公众号文章分类目录,点击标题文字可打开分类文章列表: CAD安装卸载 异常.退出 文件及输入输出 基本操作技巧 各种设置及相关问题 界面和显示相关问题 快捷键 视图设置和调整 ...
- access 链接mysql数据库教程_如何在Access中插入超级链接
要向数据库中添加超级链接,要经过两个步骤,一是在表中定义字段类型为超级链接,一是向此字段中添加数据. 要在表中定义字段类型为超级链接,可以按下面的步骤操作: (1)打开数据库,选择要在数据库窗口中包含 ...
- python数学公式代码导入_在Matplotlib图中插入LaTex公式实例
Matplotlib可以无缝的处理LaTex字体,在图中加入数学公式 from matplotlib.patches import Polygon import matplotlib.pyplot a ...
最新文章
- 欧拉定理和C语言实现 - win32版
- 处理之后的图像句柄传到显示框_深度学习目标检测与预处理模块
- python学习笔记(五)缩进
- android--仿网易新闻主界面
- 属于程序员的等级,看看你是哪个级别?
- 李宏毅机器学习笔记【未完】
- selenium(三)之webDriver与浏览器版本问题
- 用python制作简单节日贺卡
- java-php-python-ssm演唱会购票系统计算机毕业设计
- XP sp3 安装Step7 V5.5和WinCC V7.0记录(仅用于个人)
- document.getElementsByTagName()返回值
- Fragment中OnCreate与OnCreateView区别
- 计算机应用方面中文学术论文写作详细总结
- VS2017添加qt-vsaddin-msvc2017-2.7.1.vsix
- Maven从入门到放弃
- idea springboot,maven项目注解,引用等飘红
- uniapp h5 发行
- 如何看一篇文章的分数
- 获取当前时间,并转换为时间戳
- 飞机在加速起飞和在空中飞机时的动力是什么提供的?
热门文章
- CVS常用命令速查手册
- 以index访问Tensor元素+ 反池化 unpool TensorFlow代码
- JavaScript数字精度丢失的一些问题
- VMware11.1.2+centOS7.4虚拟机联网问题并设置静态IP
- 2016-2017 ACM Central Region of Russia Quarterfinal Programming Contest
- CodeForces 670C Cinema
- rem布局下使用背景图片和sprite图
- 用PHP语言做网站常见漏洞有哪些?
- 【闲聊产品】之一:半路出家的产品经理
- Eclipse插件大全 挑选最牛的TOP30