SZ 博客

忠于理想 忠于技术

0%

发表于 分类于 ， 阅读次数：

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

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

项目详情见：chart-lib-learn

阅读全文 »

发表于 分类于 ， ， 阅读次数：

版本：V6.0.0

背景

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

287009154-2e672060-6500-4db9-9a9b-ecc85a38329e

结论

解决问题的流程如下：

  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. 计算所有的候选角度所需要的间隔数，选择所需间隔最少且其中角度最小作为自适应的结果。

image-20250226200628650

阅读全文 »

发表于 分类于 ， 阅读次数：

图形引擎调研

图形引擎概览

引擎 定位/场景 渲染器 开源/协议
pixiJS 在线游戏、教育内容、互动广告、数据可视化 WebGL/Canvas ✅ MIT
leaferJS 高效绘图 、UI 交互（小游戏、互动应用、组态）、图形编辑 Canvas ✅ MIT
p5.js 教育/学术 Canvas ✅ LGPL-2.1
Zrender 图表绘制 Canvas/Svg ✅ BSD-3-Clause
Antv/G 图表 地图 图 Canvas/Svg/WebGL/WebGPU ✅
阅读全文 »

发表于 分类于 ， ， 阅读次数：

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": []
}
阅读全文 »

发表于 分类于 ， ， 阅读次数：

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

版本：V5.2.8

背景

image-20241024172238716

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是如何实现两套语法用于绘制图表的。

阅读全文 »

发表于 分类于 ， ， 阅读次数：

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

版本：V5.2.8

背景

首先介绍两个定义：

图表画布：整个用于绘制图表内容的区域，包括图例、轴、以及图表名称。

图表数据映射区域：X轴与Y轴框定的，用于将柱子或者折线映射到像素的画布区域。

与ECharts的Padding仅解决图元向图表画布映射范围问题不同，G2的Padding解决的不是图元布局问题而是真正意义上的图表数据映射区域到图表的边界的距离。

我们先来看G2的解决方案：

G2当图例、Y轴名称、Y轴标签或其余图元位置或大小发生变化时会挤占图表空间。

优点是：更加智能，且不会产生重叠，用户只需关心一个边距（Padding）的概念即可配置出相对好看的图表，更加易用。

缺点是：当出现极端数据例如10个数量级或者跟大的数值，或者极长的数据项名称时，图表的空间会被过度挤压以至于无法查看。

我们再来看ECharts的解决方案：

ECharts当图例、Y轴名称、Y轴标签或其余图元位置或大小发生变化时会不会挤占图表空间，不会更改数据到图表像素映射，如果图例过长一般会发生遮挡，如果轴标签过长则会产生覆盖。

优点：不会破坏图表的布局方式，在图表包含异常值时优先保证图表的正常显示。

缺点：不够智能，具有异常值时会产生遮挡或截断。

本文不讨论这两种实现方案哪种更优，仅尝试从源码的角度分析G2是如何实现自适应映射范围的。

阅读全文 »

发表于 分类于 阅读次数：

简介

Monorepos

Monorepos 是一种软件开发实践，其中多个项目（通常是相关或依赖的项目）存储在同一个版本控制库中，而不是分散在多个独立的仓库中。这种方法可以在大型组织中使用，以便更好地管理代码共享、依赖关系和版本控制。

Git Submodule

Git Submodule 是 Git 中的一种机制，允许你将一个 Git 仓库作为另一个 Git 仓库的子目录。每个子模块都有自己的版本控制历史记录。

阅读全文 »