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

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

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

快枪手快速开始：https://github.com/ProtoTeam/tcharts.js

一、介绍

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

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

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

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

二、做什么

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

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

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

• 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 整个项目的类图结构如下图所示（其实代码量很小，读起来应该不难懂！）

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

代码在这里：https://github.com/ProtoTeam/tcharts.js。时间原因，目前只完成了 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 | |
 +----+---------------+--------------------+

希望本文能帮助到您！

点赞+转发，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓-_-）

关注 ｛我｝，享受文章首发体验！

每周重点攻克一个前端技术难点。更多精彩前端内容私信 我 回复“教程”

原文链接：https://github.com/ProtoTeam/blog/blob/master/201711/3.md

作者：蚂蚁金服数据体验团队