我应该使用哪一个可视化工具？ - 文章详情

Hello，大家好，我是雷布斯。

最近有一位参加过辅导的同学咨询我，工作中遇到了技术选型的问题。具体的需求是想要做一个可视化的系统，使用图表等方式来展示业务数据，但却不知道该如何抉择。

对于工作年限稍长一点的同学，可能都会遇到选型的问题。今天我们就以 “我应该使用哪一个可视化工具？” 为例，简单介绍下思考过程。

要回答这个问题，那么我们就可以先了解这些问题：

选择标准是什么？
前端领域有哪些有名的可视化工具？
它们又有什么特点？
使用它们有什么常见的挑战？

接下来我们就来一一看看。

选择标准

可视化工具要想解决的核心问题是：在易用和灵活之间找到一个平衡。

易用是指用户在实现一个可视化图表的时候只用付出很少的努力
灵活是指用户能用该工具实现更多自定义的效果。

可视化框架概览

参考 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,
    fill: 'red',
    stroke: 'yellow'
  },
});

但是在这一抽象层次的工具只是简化了最后的数据绘制流程，没有简化我们的数据处理流程，或者一些通用功能（坐标轴，图例这些），所以我们需要更强大的工具。

低级可视化模块

低级可视化模块就是上面提到的更强大的工具。它们是一些和可视化相关的工具，各自都是相互独立并且负责数据处理或者数据绘制的某部分。

比如在我们在实现柱状图时通过以下的方式去计算每个条的 x 坐标，这样不仅需要我们自己实现计算逻辑，还看上去不直观。

const step = chartWidth / names.length; 
const barWidth = step * 0.8; 
const xs = Array.from(indices, (i) => i * step);

如果我们使用 d3-scale 就可以简化这个流程如下。

const map = d3.scaleBand().domain(indices).range([0, chartWidth]);
const xs = Array.from(indices, map);

这一抽象层次的工具简化了图表绘制各个流程，但是难道每一个流程，都必须人来参与吗？工具可以自己完成一部分吗？

可视化语法

可视化语法能大幅度减少人的参与，同时保持相对可观的灵活性。

可视化语法的开山鼻祖可以说是：图形语法，目前在可视化语法这一层级，比较出名的工具 G2，Vega-Lite 等都或多或少借鉴它的思想。

图形语法的核心就是用一些不同同图表都通用的概念（比例尺，坐标系等）去描述一个可视化图表。

下面是一个案例，大家也不用深入了解，只用大概感受一下。

要实现上一章的条形图就可以很简单了，下面用 G2 举例子：

import { Chart } from '@antv/g2';

const data = [
  { name: "questions", value: 17 },
  { name: "schools", value: 25 },
  { name: "philosophers", value: 35 },
];

const chart = new Chart({
  width: 480,
  heihgt: 300,
  container: 'container-canvas'
});

chart.data(data);

chart
  .interval()
  .position('name*value')
  .color('name');
  
chart.render();

如果我们希望再简单一点使用呢？那么就需要看看下一层级了。

高级可视化绘制模块

高级可视化绘制模块和可视化语层级一样，都不会显式指明可视化图表的类型，但是这些模块不一定是所有图表都通用的，同时在不同的可视化工具中功能也不一样。

在 ECharts 中就会通过 series 去组合形成不同的可视化图表类型。

下面用是 ECharts 去绘制上一节需要的条形图的代码。

const chart = echarts.init(document.getElementById('container-canvas'));

const option = {
  xAxis: {
    type: 'category',
    data: ['questions', 'schools', 'philosophers']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [17, 25, 35],
      type: 'bar',
    }
  ]
};

chart.setOptions(options);

图表模板

图表模版这一抽象层级一个最大的改变就是需要指定我们选择的图表的类型，不用去考虑如何去组合高级可视化绘制模块。

这在意味着非常的方便的同时，丧失了很多灵活性，适合对自定义要求不高的任务。

下面用 G2Plot 来实现我们上一章对条形图，发现代码确实少了很多。

import { Column } from '@antv/g2plot';

const data = [
  { name: "questions", value: 17 },
  { name: "schools", value: 25 },
  { name: "philosophers", value: 35 },
];

const column = new Column('container-canvas', {
  data,
  xField: 'name',
  yField: 'value',
  seriesField: 'name',
});

column.render();

智能可视化

如果你在可视化的过程中，什么也不愿意参与或者想参与程度很低的话，那么智能化可视化便是你最好的选择。

一般来说你只需要把数据和可视化意图告诉它，它就可以自动可视化出来。

比如 @antv/AVA 就可以非常简单地完成我们上面提到的分析任务，我们甚至都不需要去告诉它需要条形图，如下的代码就可以把条形图做出来。

import { AutoChart } from '@antv/auto-chart';

const data = [
  { name: "questions", value: 17 },
  { name: "schools", value: 25 },
  { name: "philosophers", value: 35 },
];

autoChart('container-canvas', data);

最后

上面带大家了解了不少可视化相关的知识点，相信大家能根据自己的实际需求进行选择。

工作中做技术选型时，也推荐使用这种方式进行技术调研。

最后也给我们的辅导服务打个广告，现在报名支持指定导师哦~