超好用的命令行图表库 - tcharts.js

avatar
数据可视化 @蚂蚁集团

作者简介 hustcc 蚂蚁金服·数据体验技术团队

我们开发使用的很多工具都是 cli 工具,比如 babel,eslint,webpack,jest 等等。控制台因为其特殊性,它的信息表现力仅在于一个一个单纯的字符。

控制台的字符图表可以有效提高数据可视化能力,提高信息接收的效率,也更加美观。例如:

/**
 * 柱形图
 *
 * ^
 * |    A:70
 * |   +---+
 * |   |   |
 * |   |   |              C:50
 * |   |   |             +---+
 * |   |   |             |   |
 * |   |   |     B:30    |   |
 * |   |   |    +---+    |   |
 * |   |   |    |   |    |   |
 * |   |   |    |   |    |   |
 * |   |   |    |   |    |   |
 * +---+---+----+---+----+---+----->
 *
 */

快枪手快速开始:github.com/ProtoTeam/t…

一、介绍

目前很多的控制台应用,能够做到颜色和简单的动画,来让数据显示更清晰、美观,举个例子:

以上是某一个简单项目 uri-parse 的单测结果在控制台的展现效果,已经非常美观清晰了。

但是对于某些数据的展现,仅仅只是颜色上的美化,并不能有很好的效果,比如:

以上是两个代码进行 benchmark 跑分的效果。其实如果不是限制在控制台上,我们都希望:这种跑分结果使用一个**柱形图**来给出一个相对比较,这样更加直观。

二、做什么

我们要做什么?很明确,我们要做一个控制台下面的图表库。

想到图表库,我们应该很容易想到 echarts、G2 等等,这样图表库的运行环境是在浏览器,可以充分利用 canvas、SVG、css 来做出各种布局、样式、特效,吊得不行!

先放一个图:

截图自:github.com/chartjs/Cha…

对于控制台环境,我们可以做些什么图形呢?我大概列举几个:

  • Table:表格
  • Bar:柱形图
  • HBar:横向柱形图
  • Box:面积图
  • DirTree:目录结构图

以上是我能想到的一些应用实例。

三、怎么做?

最终实现的是一个可以使用的的控制台图表库,但是可能并不完美!

约定

为了做到以上的几个控制台图表,并且**提高图形的在不同环境控制台的适配能力**。约定:

  • 图形仅仅使用基本字符绘制(键盘上的字符)
  • 不使用颜色(部分控制台并不支持颜色,同样也简化代码)
  • 取名叫 tcharts 吧:terminal charts。

原理

先给大家讲一个例子,现在玩手游的人很多,手游发布上线之前会送广电局审核,审核中有一点就是游戏中角色的衣服是否存在裸露(漏电)。游戏在制作的时候,会现有角色的 3D 模型,然后在角色上挂上一层衣服,这个就是收费点——皮肤。

有些时候,美术做出来的皮肤挂到某些人物身上的时候,因为皮肤尺寸小了,或者角色胸太大了,导致裸露,这种情况下,游戏就很可能不能通过审核了!

这个例子中,其实大家可以感受到**图层**的概念,就是一个角色在游戏中的渲染会有很多层次结构,但是最终用户看到的,其实就是最上面的一层。

类似的,在 HTML div 布局的时候,当结构有层叠的时候,可以通过 z-index 调整层次结构,让用户看不到不同的东西。

类似的,浏览器的图表库也会有图层的概念,一层一层叠加覆盖起来,形成最终用户看到的图形!

控制台图表 tcharts.js 开发的基本原理也是分不同的图层,好处在于:

  • 图层复用容易;
  • 扩展图表类型容易;
  • 代码更清晰;

当然缺点在于 重复绘制

比如最上面的一个柱形图,我们可以按照图层的思路,可以分成为两种图层:

  • Axis:坐标轴
  • Rect:矩形

也就是上面的柱形图可以拆分成四层:

1 层 Axis

    ^
   |
   |
   |
   |
   |
   |
   |
   |
   |
   |
   +---+---+----+---+----+---+----->

3 层 Rect

       +---+
       |   |
       |   |
       |   |
       |   |
       |   |
       |   |
       +---+

然后还可以细分,Axis 分成 2 条 Line,加坐标 Point;Rect 就直接可以拆分成 4 条 Line。

这样一层一层递归下去,最终实际工作的,就是在每一个对应的坐标点,绘制一个点。当所有的点绘制完毕之后,整个图也就显示出来了。

四、tcharts.js

总体来说基本原理就是:

                        Point
                          |
                        Line
                        /  \
           Text   +   Rect   Axis
              \       /  \     |
               RectText    \   |
                    \      |   |
                Bar / HBar / Table / Box

从 点 -> 线 -> 面,一层一层扩展图形,然后引入 Layer(图层)来组装这些元素,最终通过图层的合并,生成最终的图形。

tcharts.js 整个项目的类图结构如下图所示(其实代码量很小,读起来应该不难懂!):

目前导出 4 个图形!

整个项目代码文件的依赖关系为(使用 webstorm 生成,无法删除一些不必要的连线):

代码在这里:github.com/ProtoTeam/t…。时间原因,目前只完成了 4 个图表,不过后续的扩展应该不难,代码上也欠优化,希望欢迎大家参入进来。

发几个效果出来(可能在某些页面 css 下面,导致没有完全对齐!):

    +--------------+----------------------+---------------------+
    |              |                      |                     |
    |              |                      |                     |
    |              |                      |                     |
    |              |                      |                     |
    |              |                      |                     |
    |              |                      |                     |
    |              |        C:25%         |      Hello:25%      |
    |              |                      |                     |
    |              |                      |                     |
    |    A:25%     |                      |                     |
    |              |                      |                     |
    |              |                      |                     |
    |              +----------------------+---------------------+
    |              |                                            |
    |              |                                            |
    |              |                                            |
    |              |                   B:25%                    |
    |              |                                            |
    |              |                                            |
    +--------------+--------------------------------------------+


    ^                                                      
    |                                                      
    +---------------+                                      
    |           D:30|                                      
    +---------------+                                      
    |                                                      
    +------------------------------------+                 
    |                                C:70|                 
    +------------------------------------+                 
    |                                                      
    +-----------------------+                              
    |                   B:45|                              
    +-----------------------+                              
    |                                                      
    +----------------------------------------------------+ 
    |                                               A:100| 
    +----------------------------------------------------+ 
    |                                                      
    +----------------------------------------------------->


    +----+---------------+--------------------+
    | id |      name     |      birthday      |
    +----+---------------+--------------------+
    | #1 |    xiaowei    |     1992-08-01     |
    +----+---------------+--------------------+
    | #2 |     hello     |     1992-09-20     |
    +----+---------------+--------------------+
    | #3 |    tcharts    |     2017-06-27     |
    +----+---------------+--------------------+
    | #4 |     world     |                    |
    +----+---------------+--------------------+

对tcharts感兴趣的同学可以关注专栏或者发送简历至'xiaowei.wzw####alibaba-inc.com'.replace('####', '@'),欢迎有志之士加入~

原文地址:github.com/ProtoTeam/b…