G2 5.1.0 发布:新主题,3D 可视化,按需打包

G2 是蚂蚁集团 AntV 团队开源的企业级可视化框架,在今年的3月份发布了全新的 5.0 版本。半年以来,在公司和社区同学共同的努力下,我们迎来了 5.1.0 的发布。希望新的版本能像更好地实现我们的愿景:用 G2,你可以更专业地、快速得获得更多可视化效果,同时获得可视化思维。

那么接下来就来看看 5.1.0 版本带来的一些变化和新特性:

默认安装版本

从 G2 5.1.0 开始,G2 5.x 的版本将作为 NPM 安装的默认版本。这意味着如下命令将直接安装 G2 5.x 的版本:

bash 复制代码
$ npm install @antv/g2

新主题

G2 5.1.0 引入了新主题:light,该主题包含了全新的色板,希望能让用户获得更清晰的看数体验。(案例)

light该主题会作为 G2 5.x 的默认主题,不需要显式指定:

javascript 复制代码
import { Chart } from '@antv/g2';

const chart = new Chart(); // 没有指定 theme,会使用新主题

对于使用 5.0.x 的用户,如果希望使用新的默认主题,只需要去掉 theme: 'classic',否则将会继续使用老的默认主题:

javascript 复制代码
import { Chart } from '@antv/g2';

const chart = new Chart({
  theme: 'classic', // 去掉这一行,将会使用新主题
}); 

3D 可视化

G2 5.1.0 版本推出了 3D 可视化能力,对于 G2 来说这一个重大的突破,让 G2 未来在科学可视化、VR 可视化等领域发展成为可能。(文档 · 案例)

javascript 复制代码
chart
  .point3D()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/2c813e2d-2276-40b9-a9af-cf0a0fb7e942.csv',
  })
  .encode('x', 'Horsepower')
  .encode('y', 'Miles_per_Gallon')
  .encode('z', 'Weight_in_lbs')
  .encode('color', 'Origin')
  .encode('size', 'Acceleration')
  .encode('shape', 'sphere')
  .coordinate({ type: 'cartesian3D' })

按需打包

G2 5.1.0 推出了按需打包的能力,可以根据应用场景来选择需要的图表集合,从而控制包大小。(文档)

下面的例子展示了只绘制桑基图:

javascript 复制代码
import { Runtime, corelib, graphlib, extend } from '@antv/g2';

// 通过扩展 Runtime 获得新的 Chart 对象
const Chart = extend(Runtime, {
  ...corelib(), // 核心能力库
  ...graphlib(), // 包含桑基图的库
});

chart.snakey(); // 使用桑基图

Spec API

G2 5.1.0 正式推出 Spec API,这使得我们可以通过一个 JavaScript 声明一个图表。(文档)

javascript 复制代码
import { Chart } from "@antv/g2";

const chart = new Chart({ container: "container" });

chart.options({
  type: "interval",
  data: {
    type: "fetch",
    value:
      "https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv",
  },
  encode: { x: "letter", y: "frequency" },
  axis: { y: { labelFormatter: ".0%" } },
});

chart.render();

所有的官网案例也可以一键切换至 Spec API。

交互式代码块

G2 5.1.0 开始的文档支持可以交互的代码块,能看见代码实际运行的效果,提高阅读体验。(文档)

更多能力

除了上述特性以外,从 5.0.0 到 5.1.0 之间 G2 还新增了如下一些重要的特性:

  • 支持设置交互初始状态,并且获得交互数据,增强了图表联动能力。(#4946)
  • 可以改变大小和自定义 Handle 样式的 Brush。(#5012)
  • Tooltip 可以指定挂的 DOM。(#4980)
  • 支持 Auto Padding。(#5046)
  • 新增热力图 Heatmap。(#5047)
  • 新增韦恩图 Venn。(#5129)
  • 新增坐标轴 Mark:AxisX 和 AxisY。(#5188)
  • 新增图例 Mark:Legends。(#5290)
  • 优化图例的布局和展示。(#5202)
  • Chart API 和 Spec API 可以同时使用。(#5074)
  • 支持离散的 size 通道。(#5230)
  • 支持 HexBin。(#5413)
  • 支持 HTML 数据。(#5354)
  • 新增变宽折线图。(#5137)
  • 条形图支持设置最大和最小宽度。(#5123)

更多迭代内容可以看 G2 的 Releases Notes。

未来工作

目前 G2 5.0 还在高速发展的阶段,后半年重点在视觉 、文档 、能力稳定 和社区繁荣上面。如果对下面感兴趣的小伙伴欢迎联系我们,让我们一起打造一个更好的可视化工具。

  • 新增主题 Token,并且提供主题生成器。
  • 文档的完善和翻译。
  • 新增更多 3D 图表。
  • 集成 @antv/ava 的能力,提供智能可视化的能力。
  • ...
相关推荐
Hilaku2 小时前
你们公司有 35 岁以上的前端吗?
前端·javascript·程序员
复杂网络与机器学习2 小时前
数学建模七件武器:把现实翻译成能算的模型,再证明它靠得住
数学·开源
鸿蒙开发2 小时前
小程序存档写到一半怎么办?双槽保存与损坏恢复实战
前端·javascript·react.js
知忆_IS3 小时前
TerriaMap 开发实战04:MVT数据自定义符号化 - terriajs源码修改
javascript·webgis·terriamap·terriajs
慧都小妮子3 小时前
Wyn商业智能国产数据库适配:数据接入、分析缓存与审计日志验证清单
数据库·数据分析·数据可视化·审计日志·商业智能
梯度下降者5 小时前
软硬件开源!一套物联网监测平台
物联网·开源·边缘计算·农业·双端管理
云上工程笔记5 小时前
SRT字幕一键转手绘动画:srt-whiteboard-animation的复刻实录
大数据·开发语言·javascript·人工智能·机器学习
FungLeo5 小时前
成为全栈·Vue管理后台篇·<scriptsetup>:把页面拆成可读、可测的 Vue 组件
前端·javascript·vue.js·typescript·前端组件化·composition api·vue sfc
奶油话梅糖5 小时前
快过 IDM 5 倍、开源免费:4,200 Star 的 Rust 下载器用 7 组对照实验“单挑“行业老大
rust·开源·idm
冬奇Lab17 小时前
一天一个开源项目(第257篇):AI Design Skills —— 把设计规范写成 AI 能执行的规则,落地页与 Figma 两套 Skill
人工智能·开源·claude