背景

pixelmatch是一个JavaScript像素级图像比较库,最初创建是为了比较测试中的屏幕截图。具有准确的抗锯齿像素检测和感知色差指标。非常小（大约有 150 行代码）可以在浏览器和nodejs中运行。

本文简析pixelmatch的工作过程及原理。

本文简述G2如何实现点击图例联动数据筛选。

这里回答三个问题

1. 实现图例联动数据筛选的核心逻辑。
2. 如何隐藏/移除数据。
3. 如何显示/新增数据。

结论

实现图例联动数据筛选的核心逻辑

1. 点击图例图元后触发了legend:filter事件。
2. legend模块相应了legend:filter事件，根据图例的筛选状态执行了filter方法。
3. 在filter中根据上下文实例context获取了图表的marks。忽略了legends``marks对其他marks修改了其transform和scale。

如何隐藏/移除/显示/新增数据

由于filter操作本质上是在修改marks修改了其transform和scale, 并没有涉及数据的移除和添加，所以隐藏/显示逻辑其实并无区别。

本文简述ECharts如何实现点击图例联动数据筛选。

这里回答三个问题

1. 实现图例联动数据筛选的核心逻辑。
2. 如何隐藏/移除数据。
3. 如何显示/新增数据。

结论

实现图例联动数据筛选的核心逻辑

1. 点击图例后触发了legendAction同时触发整个图表的update。
2. 在图表真正执行update之前执行了restoreData方法以恢复最原始的默认数据。
3. 图表的update任务中执行了legendFilter。
4. legendFilter中根据自身属性对series做了filter。

如何隐藏/移除数据

在步骤4中对要渲染的series做了过滤仅渲染需要渲染的series。

如何显示/新增数据

在步骤2中恢复了整个图表最原始的默认数据。

图表引擎调研-特点与发展发向

背景

本文将描述对一些著名的图表引擎的调研结果。以期对图表引擎的开发做出一些方向性的指导。

图表引擎调研-编辑器接入

本文主要调研一些开源的底层图表库，评估其易用性、灵活性、可定制性、以及接入charts-studio的难易程度。目的是评估图表工具的底层引擎是是否需要更换，能否为图表工具选择一个灵活且高效的底层引擎。

项目详情见：chart-lib-learn

版本：V6.0.0

背景

本文将简述ECharts如何实现标签自动旋转特定角度以解决柱状图或折线图轴线标签重叠的问题。

结论

解决问题的流程如下：

1. 首先定义了几个候选的旋转角度[0，25，45，70，90]。
2. 获取最长的label并根据最长的label的 size计算每一个候选的旋转角度下的size（详情见：https://codepen.io/agurtovoy/pen/WNPyqWx）
   1. 其中width下图中的横向绿线部分即和轴交叉的部分。
   2. 其中height为下图中红框高度。
3. 将步骤2的size和图表中的间隔做比对，横向图width做比对纵向图height做比对。看最大label的交叉长度需要几个单位间隔的宽度来装。这个值即为label的间隔个数。
4. 计算所有的候选角度所需要的间隔数，选择所需间隔最少且其中角度最小作为自适应的结果。

图形引擎调研

图形引擎概览

Vega-Schema解析

vega的schema设计以json格式描述数据视觉外观和交互式行为而闻名。 作为业界标杆本文简析Vega-Schema的设计。

规范(Specification)

以下是 Vega 规范的基本概述。完整的规范包括数据、刻度、轴、标记等属性的相应子集的定义。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A specification outline example.",
  "width": 500,
  "height": 200,
  "padding": 5,
  "autosize": "pad",
  "signals": [],
  "data": [],
  "scales": [],
  "projections": [],
  "axes": [],
  "legends": [],
  "marks": []
}

HighCharts源码解析之Class体系

HighCharts是一个默认使用SVG渲染器的图表引擎，其对内部的DOM元素都设置了Class属性以描述其类别和样式。起到了类似ECharts theme的效果。

G2源码解析之函数式API与规范式API

版本：V5.2.8

背景

G2 设计了一套规范（Spec） 去描述可以绘制的可视化，使得用户可以通过调用 chart.options(options) 根据指定的满足规范的选项（options） 去渲染图表。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

(() => {
  const chart = new G2.Chart();

  chart.options({
    type: 'interval',
    data: [
      { genre: 'Sports', sold: 275 },
      { genre: 'Strategy', sold: 115 },
      { genre: 'Action', sold: 120 },
      { genre: 'Shooter', sold: 350 },
      { genre: 'Other', sold: 150 },
    ],
    encode: {
      x: 'genre',
      y: 'sold',
    },
  });

  chart.render();

  return chart.getContainer();
})();

基于底层的 Spec，为了提供更多样化和灵活地声明图表的能力，G2 也提供了一系列函数式 API 来声明图表，比如声明上面简单的条形图：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

(() => {
  const chart = new G2.Chart();

  chart
    .interval()
    .data([
      { genre: 'Sports', sold: 275 },
      { genre: 'Strategy', sold: 115 },
      { genre: 'Action', sold: 120 },
      { genre: 'Shooter', sold: 350 },
      { genre: 'Other', sold: 150 },
    ])
    .encode('x', 'genre')
    .encode('y', 'sold');

  chart.render();

  return chart.getContainer();
})();

本文将探究G2是如何实现两套语法用于绘制图表的。