开发自己的dashboard

背景介绍:

刚进入公司以后,就开始不断的做数据处理,后来老板要求做dashboard,当时可真的是迭代了很多版本,但是一直都达不到老板的要求,在公司前端工程师的帮助下,完成了一个版本;(数据保密,就不再展示了)。

但是我感觉太丢人了,明明刚开始进公司的时候对老板说自己可以数据可视化一条龙的,怎么做个大屏幕还要请外援?后来我也就在一直积极探索;也就是前几天才算完成,从头到尾都是自己一个人做的;中间的过程是非常痛苦和享受的;最终使用的就是python和JavaScript。有人可能会问你不是喜欢R么,怎么用起来python和JavaScript了🙃🙃,听我后面一一介绍。

故事的开始

故事开始从进入公司开始说,刚开始进入公司的时候,我感觉我R和shiny用的也都非常六了,还知道一点JavaScript以及写了解决10w行的python代码(主要是numpy、scikit-learn、matplotlib方面的)。我心想这肯定没有问题,但是真的接触到数据之后,是崩溃的;

为什么放弃R了:

  1. 就拿数据是脏数据来说,有的数据表头是含有回车键、空格、中文名字等,这些“乱码”用R来处理真的不行,别对我说用什么jiantor之类的包,我都试过了,还本来打算手动修改表头的名字,但是这样增加我的工作量;然后放弃了。

  2. 大家都知道tidyverse的函数非常强大,比如长数据和宽数据的转换,做分组计算,这些都是非常方便,但是很多的时候,遇到一列是中文就非常麻烦了;简直是不要太痛苦;管道函数虽然很优雅,但是我还是放弃了。

  3. 关于代码保存问题,代码保存我知道要保存为utf-8格式的,但是我还是害怕,就是感觉R文件太不稳定了,我怕万一文件更改个位置之后,就会出现乱码,这样我又要重新修改,尤其是需要在R代码里面加上中文注释,或者一些变量里面需要中文;为了避免这些情况,我也就是放弃R了。(这样的情况在我刚开始用R的时候遇到过,后来就没有遇到过了,也都是几年前的事情了)。

  4. shiny问题,shiny用起来真的舒服,真的不错,我很喜欢,但是我也尝试过用shiny做一些工程上的东西,但是很容易崩溃,尤其是数据量大起来以后,如果一个模块卡住,别的模块基本上就动不了了。我还遇到一个致命的就是,shiny会崩溃,这样崩溃的情况,在我眼中是不能存在的;尤其是只要数据有错误;基本上shiny的服务器就瘫痪了;程序直接卡住。然后也就放弃shiny了。

  5. 链接数据库问题,公司使用的是阿里云的服务器,使用跳板机链接(说白了,就是使用ssh通道链接服务器)。简单的来说,R链接一个服务器的数据库肯定没有任何问题,关键是R如何通过阿里跳板机链接,这个有没有人能教教我?我找了很多资料,都不行;然后放弃了。

  6. ggplot2不能交互问题。事先声明,ggplot2本身就不是用来做动态交互的,这个我肯定知道,我也知道用plotly包的ggplotly函数就可以将ggplot2转换成交互的,但是有个问题,就是这样做我要妥协很多东西,比如加载资源的时候,我要想办法将plotly的东西镶嵌到网页中,这些渲染的过程中,很容易出现很多错误。因为和一些工业级别的可视化包相比,ggplot2和plotly组合实在是太多余了。

为什么也放弃Python的一些包:

  1. 首先放弃的就是matplotlib,这个包非常好,但是也是一个问题就是出来的结果都是静态的,不适合交互,就是这么简单。

  2. 放弃了pyecharts。这个包是将JavaScript版本的echarts打包成python包,也确实非常的优秀,可以将可视化保存为html,我之前是打算将代码生成的html文件嵌入到网页中的,但是一段时间后,我放弃了,因为太难控制网页布局了。

  3. 表格显示问题,我之前是使用的是pandas的导出为html格式的,然后将html格式嵌入到我的网页中,放弃的原因就是网页布局太丑了,并且不好控制。

  4. 放弃了python的一些交互式的看板包,比如bokeh、dash。这些包和shiny一样,都是非常优秀的,我曾经花了几天时间来研究bokeh,但是放弃了,主要是bokeh交互式看板有的地方需要JavaScript。我一脸懵逼,本来用这个看板就是因为不想写、不会写JavaScript,现在你让我写JavaScript,那是不存在的。我又放弃了。

  5. 放弃了flask,有的人说python的flask不是很强嘛,怎么也放弃了,当时用flask做接口,需要提供跨域功能,这问题也都解决了,但是用的是额外添加的包,另外flask写的借口,还要用postman来测试,实在是太麻烦了。也放弃了。

为什么放弃了原始前端

  1. 我前端真的非常菜,就是那种我连导航栏都不会写,写出来了都不知道如何给导航栏上的每个按钮添加到一个网页的链接。还有一些css样式,我也不会,这个后面就很少写原生的css样式了。

遇到的打击

  1. 当时看前端用了vue搭建了一个数据大屏,看着真的是非常的酷炫,真的强大,而且自定义非常强,交互也非常方便,尤其是是echarts包画出来的图真的好看。这都不算什么,就是有时候我们在做静态的图的时候(比如用matplotlib和ggplot2画图),要写很多代码来修改,而且很多新手根本不会微调这些参数。但是我看我们公司那个前端稍微调整了echarts的一些参数,图就变化了,而且非常直观。这个投入产出比,让我心动。

故事发展

确定技术栈:

  1. 我承认我自己是小白,能力上python一般、JavaScript更是入门,但是有的时候就是逃避不了。为了效果和项目。最终终于找到一个适合自己的技术栈。

  2. 后端链接数据库的技术上,使用的就是python的几个包,这个方法是可以帮助我们使用ssh链接阿里数据库。

  3. 数据处理上,肯定是python的numpy和pandas作为主要使用对象;基本上使用python已经是够用了。

  4. 前端框架,使用的是vue的cli。我其实不会vue的语法,使用vue-cli主要是为了我的代码框架非常容易调试和打包。尤其是做一些多页面的内容,vue-cli再加上router简直是起飞。太方便了。

  5. 前端的图展示使用的就是echarts,JavaScript的原生包,用起来非常方便,而且写起来非常简单。

  6. 前端展示的表主要是tabulator,这个展示表非常方便(不过我不太喜欢这个JavaScript包,我后面要将这个替换掉,主要是感觉不稳定)。

  7. 前端样式我用的就是bootstrap,还有一些我自己写的css样式,用起来非常爽。

  8. 前端交互功能,这个主要是使用原生成html自带的监听函数,然后再加上我自己写的JavaScript代码,用起来就非常顺滑了。

  9. 前后端的数据通信上,我python端使用的就是Fastapi,这个是比flask还要方便。前端使用的就是JavaScript的fetch函数。用起来真不错。很顺滑。

故事终结

  1. 上面说的一些对比,不是说xx语言不好,也不是说xx包不好,只是在我眼中,做数据大屏的项目上,这个包和别的包比起来太麻烦了,这个语言相对于别的语言比起来太多余了。同样的时间,用别的语言完成可能很方便。

  2. 我很水,上面都是个人总结。后面会继续分享自己做的项目的思路,欢迎继续关注。

  3. 最近遇到个大哥,他告述我redash很好用,是未来的主流,我也在努力学习。

  4. 上面的遇到的数据库问题,前端问题,都要感谢几位大哥的帮助,非常感谢😘

下面打算做什么

  1. 后面还要做一些看板,涉及到交互问题,如果这个看板有10个人在使用,但是我不可能让这10个人发送的数据查询请求都同时去服务器上查询数据。我在想如何使用代码实现一个排队查询机制。并且如果有相同的查询任务,在一定的时间范围内,如何返回相同的查询结果,这样可以降低服务器的压力;减少队列的阻塞。

技术参考链接:

csdn:https://blog.csdn.net/yuanzhoulvpi
知乎:https://www.zhihu.com/people/fa-fa-1-94