效果如下图(1980 - 2019年各国数据总览)


关于本例用到的package

renkun-ken/formattable​github.com

htmlwidgets/sparkline​github.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)
}

  1. 通过gen_spkline()函数将sparkline的html代码(字符串)写入data.frame
  2. 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相关推荐

  1. 表格在整个html居中显示,html 表格字符居中显示_如何在HTML中居中显示表格?

    html 表格字符居中显示_如何在HTML中居中显示表格? html 表格字符居中显示_如何在HTML中居中显示表格? html 表格字符居中显示 HTML table provides the ab ...

  2. latex里图片大小如何调整_怎样用latex修改插入图形的大小,使图形大小一致。...

    2011-08-12 回答 很长时间没更新了,其实期间也有很多感触,就是没心情去留下痕迹.最近面临毕业,很是头疼.又面临发表论文,如果要发到国外期刊,需要用latex编辑.以前只用word,觉得挺好, ...

  3. js小球与边框碰撞反弹_四叉树在碰撞检测中的应用

    缘起 <你被追尾了>中预告了加速碰撞检测的算法--四叉树(for 2D),所以本文就来学习一下. 分析 首先是为什么要使用四叉树进行优化,其实<你被追尾了>中已经说了,这里简单 ...

  4. word删除任意单个字符_如何从Word中的单个页面中删除页眉或页脚

    word删除任意单个字符 You can remove or make changes to headers or footers on any page in Microsoft Word. Thi ...

  5. excel添加列下拉框票价_如何在excel中设置下拉菜单

    excel是日常办公中应用非常多的办公软件之一,其强大的数据统计.分析功能为工作带来不少方便.在EXCEL中设置下拉菜单,以方便输入相同内容.本文就以将性别设置为下拉菜单为例,介绍在excel中设置下 ...

  6. 合并的表格怎么加横线_如何在excel中文字后面加横线

    如何在excel中文字后面加横线以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 如何在excel中文字后面加横线 好办啊 ...

  7. ai中如何插入签名_如何在PDF中插入一个或多个空白页?

    在编辑或修改PDF文档时,一般都需要新增空白页后再添加文本或图片等内容,那么如何在PDF中插入一个或多个空白页呢? 首先打开极速PDF编辑器,或打开需要编辑的PDF文档后,点击右上角"文档& ...

  8. ai中如何插入签名_怎么将CAD中插入图片的多余部分抠掉?如何设置透明效果?...

    下面是本公众号文章分类目录,点击标题文字可打开分类文章列表: CAD安装卸载  异常.退出  文件及输入输出  基本操作技巧  各种设置及相关问题  界面和显示相关问题  快捷键  视图设置和调整   ...

  9. access 链接mysql数据库教程_如何在Access中插入超级链接

    要向数据库中添加超级链接,要经过两个步骤,一是在表中定义字段类型为超级链接,一是向此字段中添加数据. 要在表中定义字段类型为超级链接,可以按下面的步骤操作: (1)打开数据库,选择要在数据库窗口中包含 ...

  10. python数学公式代码导入_在Matplotlib图中插入LaTex公式实例

    Matplotlib可以无缝的处理LaTex字体,在图中加入数学公式 from matplotlib.patches import Polygon import matplotlib.pyplot a ...

最新文章

  1. 欧拉定理和C语言实现 - win32版
  2. 处理之后的图像句柄传到显示框_深度学习目标检测与预处理模块
  3. python学习笔记(五)缩进
  4. android--仿网易新闻主界面
  5. 属于程序员的等级,看看你是哪个级别?
  6. 李宏毅机器学习笔记【未完】
  7. selenium(三)之webDriver与浏览器版本问题
  8. 用python制作简单节日贺卡
  9. java-php-python-ssm演唱会购票系统计算机毕业设计
  10. XP sp3 安装Step7 V5.5和WinCC V7.0记录(仅用于个人)
  11. document.getElementsByTagName()返回值
  12. Fragment中OnCreate与OnCreateView区别
  13. 计算机应用方面中文学术论文写作详细总结
  14. VS2017添加qt-vsaddin-msvc2017-2.7.1.vsix
  15. Maven从入门到放弃
  16. idea springboot,maven项目注解,引用等飘红
  17. uniapp h5 发行
  18. 如何看一篇文章的分数
  19. 获取当前时间,并转换为时间戳
  20. 飞机在加速起飞和在空中飞机时的动力是什么提供的?

热门文章

  1. CVS常用命令速查手册
  2. 以index访问Tensor元素+ 反池化 unpool TensorFlow代码
  3. JavaScript数字精度丢失的一些问题
  4. VMware11.1.2+centOS7.4虚拟机联网问题并设置静态IP
  5. 2016-2017 ACM Central Region of Russia Quarterfinal Programming Contest
  6. CodeForces 670C Cinema
  7. rem布局下使用背景图片和sprite图
  8. 用PHP语言做网站常见漏洞有哪些?
  9. 【闲聊产品】之一:半路出家的产品经理
  10. Eclipse插件大全 挑选最牛的TOP30