控制台下的图表库 tcharts.js
2017-12-08 14:39
204 查看
点击有惊喜
我们开发使用的很多工具都是 cli 工具,比如 babel,eslint,webpack,jest 等等。控制台因为其特殊性,它的信息表现力仅在于一个一个单纯的字符。
控制台的字符图表可以有效提高数据可视化能力,提高信息接收的效率,也更加美观。
快枪手快速开始:https://github.com/ProtoTeam/tcharts.js
目前很多的控制台应用,能够做到颜色和简单的动画,来让数据显示更清晰、美观,举个例子:
以上是某一个简单项目 uri-parse 的单测结果在控制台的展现效果,已经非常美观清晰了。
但是对于某些数据的展现,仅仅只是颜色上的美化,并不能有很好的效果,比如:
以上是两个代码进行 benchmark 跑分的效果。其实如果不是限制在控制台上,我们都希望:这种跑分结果使用一个
我们要做什么?很明确,我们要做一个控制台下面的图表库。
想到图表库,我们应该很容易想到 echarts、G2 等等,这样图表库的运行环境是在浏览器,可以充分利用 canvas、SVG、css 来做出各种布局、样式、特效,吊得不行!
先放一个图:
截图自:https://github.com/chartjs/Chart.js
对于控制台环境,我们可以做些什么图形呢?我大概列举几个:
Table:表格
Bar:柱形图
HBar:横向柱形图
Box:面积图
DirTree:目录结构图
以上是我能想到的一些应用实例。
最终实现的是一个可以使用的的控制台图表库,但是可能并不完美!
为了做到以上的几个控制台图表,并且
图形仅仅使用基本字符绘制(键盘上的字符)
不使用颜色(部分控制台并不支持颜色,同样也简化代码)
取名叫
charts。
先给大家讲一个例子,现在玩手游的人很多,手游发布上线之前会送广电局审核,审核中有一点就是游戏中角色的衣服是否存在裸露(漏电)。游戏在制作的时候,会现有角色的 3D 模型,然后在角色上挂上一层衣服,这个就是收费点——皮肤。
有些时候,美术做出来的皮肤挂到某些人物身上的时候,因为
这个例子中,其实大家可以感受到
类似的,在 HTML div 布局的时候,当结构有层叠的时候,可以通过 z-index 调整层次结构,让用户看不到不同的东西。
类似的,浏览器的图表库也会有图层的概念,一层一层叠加覆盖起来,形成最终用户看到的图形!
控制台图表 tcharts.js 开发的基本原理也是分不同的图层,好处在于:
图层复用容易;
扩展图表类型容易;
代码更清晰;
当然缺点在于
比如最上面的一个柱形图,我们可以按照
Axis:坐标轴
Rect:矩形
也就是上面的柱形图可以拆分成四层:
然后还可以细分,Axis 分成 2 条 Line,加坐标 Point;Rect 就直接可以拆分成 4 条 Line。
这样一层一层递归下去,最终实际工作的,就是在每一个对应的坐标点,绘制一个点。当所有的点绘制完毕之后,整个图也就显示出来了。
总体来说基本原理就是:
从 点 -> 线 -> 面,一层一层扩展图形,然后引入 Layer(图层)来组装这些元素,最终通过图层的合并,生成最终的图形。
tcharts.js 整个项目的类图结构如下图所示(其实代码量很小,读起来应该不难懂!):
目前导出 4 个图形!
整个项目代码文件的依赖关系为(使用 webstorm 生成,无法删除一些不必要的连线):
代码在这里:https://github.com/ProtoTeam/tcharts.js。时间原因,目前只完成了 4 个图表,不过后续的扩展应该不难,代码上也欠优化,希望欢迎大家参入进来。
发几个效果出来(可能在某些页面 css 下面,导致没有完全对齐!):
点击有惊喜
我们开发使用的很多工具都是 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 来做出各种布局、样式、特效,吊得不行!
先放一个图:
截图自:https://github.com/chartjs/Chart.js
对于控制台环境,我们可以做些什么图形呢?我大概列举几个:
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 生成,无法删除一些不必要的连线):
代码在这里: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 | | +----+---------------+--------------------+
点击有惊喜
相关文章推荐
- JS简单实现仿百度控制台输出信息效果
- js图表库——ECharts带你入门
- chart.js图表库案例赏析,饼图添加文字
- js控制台输出console的使用
- js将echarts图表转换成base64位格式编码的图片
- 强大的JavaScript响应式图表Chartist.js
- JS组件系列——开源免费图表组件:Chart.js
- JS 简易控制台插件
- Node.js控制台变色(console-color-mr)
- jQuery简单图表peity.js使用示例
- 编写js一定要使用firebug或者是控制台
- js绘制流程图、图表------with mermaid.js
- [JS图表控件]Highcharts:非常漂亮的图表API
- 比较优秀的两款JS图表统计插件
- js调试系列 控制台命令行API使用方法
- 强大的JavaScript响应式图表Chartist.js的使用
- 献10款chart图表JS插件
- Chrome控制台 JS调试的一些小技巧
- 构建ReportViewer表格工具与js图表控件一体化的报表展示解决方案
- 超级牛X 的纯JS 图表控件