在绘制条形图的过程中，因为没有借助任何工具，所以虽然代码行数不是很多，但是也能感觉到不太方便，比如自己实现数据处理过程，调用浏览器原生的绘制 API 等。
有没有办法可以简化这个流程，让我们能快更好的完成我们的可视分析任务？答案是肯定的。俗话说的好：“工欲善其事，必先利其器”，解决办法就是使用现有的工具。但是几乎所有做可视化的人会面对一个绕不开的问题：
“我应该使用哪一个可视化工具？”
要回答这个问题，那么我们就该先了解选择标准是什么？前端领域有哪些有名的可视化工具？它们又有什么特点？使用它们有什么常见的挑战？
接下来我们就来一一看看。
# 选择标准
选择可视化工具的时候，我们的标准不是哪个更好，而是哪个跟适合我们当前想要完成的任务。那么又该如何判断这个工具是否当前的任务呢？那我们首先得看看这些可视化工具解决的核心问题。
可视化工具要想解决的核心问题是：在易用和灵活之间找到一个平衡。易用是指用户在实现一个可视化图表的时候只用付出很少的努力，灵活是指用户能用该工具实现更多自定义的效果。
很容易想象得到，易用性越强的工具越不灵活，越灵活的工具越不易用。因为当你付出努力少的时候，说明很多事情工具已经自己帮你做了，而这些你是没有办法或者只有部分参与的，这无疑降低了灵活性。
所以我们选择工具的时候就是看这个工具能否在易用和灵活两方面都尽量满足我们的需求。那目前前端领域的可视化工具的易用性和灵活性有如何呢？我们马上来看看。
# 可视化框架概览
参考 Navigating the Wide World of Data Visualization Libraries 这篇文章，我们把一些有名的可视化工具用下面这张图整理了一下：
垂直方向是按照抽象程度来分类的，越底层的工具抽象程度越低，灵活性越强，易用性越差；越高层的工具抽象程度越高，易用性越强。水平方向是按照归属来分类的，左边的工具是来自于 AntV 技术栈的工具，右边的工具是来自于社区优秀的开源工具。
大概了解了社区上一些优秀的可视化工具之后，我们接下来就从渲染引擎这一层抽像开始，一层层向上看，看看它们是怎么帮助我们可视化的。
# 渲染引擎
首先是渲染引擎，渲染引擎会对浏览器的原生 API 进行封装，主要目的是为了简化我们绘制图形的流程。
比如我们用 Canvas2D 绘制一个矩形的方式如下，需要一行行的设置属性。
// 绘制一个矩形
context.fillStyle = "red"; // 设置填充颜色
context.strokeStyle = "yellow"; // 设置边框的颜色
context.lineWidth = 10; // 设置边框的宽度
context.strokeRect(0, 0, 100, 100); // 绘制边框
context.fillRect(5, 5, 95, 95); // 绘制填充颜色
但是在 @antv/g 的帮助下，直接把属性通过一个 options 的形式指定就好。
const rect = new G.Rect({
style: {
x: 5,
y: 5,
width: 100,
height: 100,
