logo

G2

  • 文档
  • API
  • 图表示例
  • 主题
  • 周边生态
  • 所有产品antv logo arrow
  • 5.3.3-beta.0
  • 快速上手
  • 简介
    • 什么是 G2
    • 在前端框架中使用
    • Spec 和 API
  • 核心概念
    • 图表(Chart)
      • G2 图表组成
      • 如何使用图表
    • 标记(Mark)
      • 概览
      • area
      • box
      • boxplot
      • cell
      • chord
      • density
      • gauge
      • heatmap
      • image
      • interval
      • line
      • lineX
      • lineY
      • link
      • liquid
      • sunburst
      • point
      • polygon
      • range
      • rangeX
      • rangeY
      • rect
      • shape
      • text
      • vector
      • wordCloud
    • 视图(View)
    • 数据(Data)
      • 概览
      • custom
      • ema
      • fetch
      • filter
      • fold
      • inline
      • join
      • kde
      • log
      • map
      • pick
      • rename
      • slice
      • sort
      • sortBy
    • 编码(Encode)
    • 比例尺(Scale)
      • 概览
      • band
      • linear
      • log
      • ordinal
      • point
      • pow
      • quantile
      • quantize
      • sqrt
      • threshold
      • time
    • 转换(Transform)
      • 概览
      • bin
      • binX
      • diffY
      • dodgeX
      • flexX
      • group
      • groupColor
      • groupX
      • groupY
      • jitter
      • jitterX
      • jitterY
      • normalizeY
      • pack
      • sample
      • select
      • selectX
      • selectY
      • sortColor
      • sortX
      • sortY
      • stackEnter
      • stackY
      • symmetryY
    • 坐标系(Coordinate)
      • 概览
      • fisheye
      • parallel
      • polar
      • radial
      • theta
      • transpose
      • cartesian3D
      • helix
    • 样式(Style)
    • 动画(Animate)
      • 概览
      • fadeIn
      • fadeOut
      • growInX
      • growInY
      • morphing
      • pathIn
      • scaleInX
      • scaleInY
      • scaleOutX
      • scaleOutY
      • waveIn
      • zoomIn
      • zoomOut
    • 状态(State)
    • 交互(Interaction)
      • 概览
      • brushAxisHighlight
      • brushHighlight
      • brushXHighlight
      • brushYHighlight
      • brushFilter
      • brushXFilter
      • brushYFilter
      • chartIndex
      • elementHighlight
      • elementHighlightByColor
      • elementHighlightByX
      • elementSelect
      • elementSelectByColor
      • elementSelectByX
      • fisheye
      • legendFilter
      • legendHighlight
      • poptip
      • scrollbarFilter
      • sliderFilter
    • 复合(Composition)
      • 概览
      • facetCircle
      • facetRect
      • repeatMatrix
      • spaceFlex
      • spaceLayer
      • timingKeyframe
    • 主题(Theme)
      • 概览
      • academy
      • classic
      • classicDark
    • 事件(Event)
    • 颜色映射(Color)
  • 图表组件
    • 标题(Title)
    • 坐标轴(Axis)
    • 图例(Legend)
    • 滚动条(Scrollbar)
    • 缩略轴(Slider)
    • 提示信息(Tooltip)
    • 数据标签(Label)
  • 进阶主题
    • 关系图(Graph)
      • forceGraph
      • pack
      • sankey
      • tree
      • treemap
    • 地图(Geo)
      • geoPath
      • geoView
    • 3D 图表(3D Chart)
      • 绘制 3D 图表
      • point3D
      • line3D
      • interval3D
      • surface3D
    • 插件扩展(Plugin)
      • renderer
      • rough
      • lottie
    • 按需打包
    • 设置纹理
    • 绘制 3D 图表
    • 服务端渲染(SSR)
    • Spec 函数表达式支持 (5.3.0 支持)
  • 版本特性
    • 新版本特性
    • v4 升级 v5 指南
  • 常见问题 FAQ

概览

上一篇
编码(Encode)
下一篇
band

Resources

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

G2 中比例尺(Scale) 是可视化很重要的一个抽象:将抽象数据映射为视觉数据,它是抽象数据和视觉数据的桥梁。如果说编码决定了标记的哪些通道需要被可视化,那么比例尺决定了这些通道该如何被可视化。

G2 内部会根据数据类型以及标记的类型,去推断比例尺的类型、定义域和值域,但是仍然可以指定对应配置。比例尺可以配置在 Mark 层级:

({
type: 'interval',
scale: {
x: { padding: 0.5 },
y: {
type: 'log', // 指定类型
domain: [10, 100], // 指定定义域
range: [0, 1], // 指定值域
},
},
});
// API
// 第一种方式
chart
.interval()
.scale('x', { padding: 0.5 })
.scale('y', {
type: 'log', // 指定类型
domain: [10, 100], // 指定定义域
range: [0, 1], // 指定值域
});
// 第二种方式
chart.interval().scale({
x: { padding: 0.5 },
y: {
type: 'log', // 指定类型
domain: [10, 100], // 指定定义域
range: [0, 1], // 指定值域
},
});

比例尺也可以配置在 View 层级:

({
type: 'view',
scale: {
x: { padding: 0.5 },
y: {
type: 'log', // 指定类型
domain: [10, 100], // 指定定义域
range: [0, 1], // 指定值域
},
},
});
// API 形式
// 第一种方式
chart.scale('x', { padding: 0.5 }).scale('y', {
type: 'log', // 指定类型
domain: [10, 100], // 指定定义域
range: [0, 1], // 指定值域
});
// 第二种方式
chart.scale({
x: { padding: 0.5 },
y: {
type: 'log', // 指定类型
domain: [10, 100], // 指定定义域
range: [0, 1], // 指定值域
},
});

标记比例尺

标记的每一个通道都绑定了一个比例尺。该比例尺会对该通道绑定的列数据进行转换,将其从数据范围:定义域(Domain) 转换到视觉范围:值域(Range)。不同类型的比例尺针对不同类型的数据和使用场景。

比例尺同步

同一个视图中的标记相同通道的比例尺会默认是同步的:会去同步比例尺的类型,定义域和值域以及其他配置。这意味一个视图中所有的标记都会按照一个同样的尺度去绘制。比如下图中的 LineX 标记虽然没有完整的数据,但是也绘制到了准确的位置,就是因为比例尺同步。

(() => {
const chart = new G2.Chart();
chart
.line()
.data([
{ year: '1991', value: 3 },
{ year: '1992', value: 4 },
{ year: '1993', value: 3.5 },
{ year: '1994', value: 5 },
{ year: '1995', value: 4.9 },
{ year: '1996', value: 6 },
{ year: '1997', value: 7 },
{ year: '1998', value: 9 },
{ year: '1999', value: 13 },
])
.encode('x', 'year')
.encode('y', 'value');
chart.lineX().data(['1996']).style('stroke', 'red').style('strokeWidth', 2);
chart.render();
return chart.getContainer();
})();

比例尺不同步

如果希望不同步(比如绘制双轴图的时候),就需要设置 scale.independent 为 true,设置了该属性的比例尺不会和任何比例尺同步。下面的例子中的 interval 和 line 的 y 通道会使用两个不同的比例尺,从而会生成两个不同的坐标轴。

(() => {
const chart = new G2.Chart();
chart.options({
type: 'view',
data: [
{ time: '10:10', call: 4, waiting: 2, people: 2 },
{ time: '10:15', call: 2, waiting: 6, people: 3 },
{ time: '10:20', call: 13, waiting: 2, people: 5 },
{ time: '10:25', call: 9, waiting: 9, people: 1 },
{ time: '10:30', call: 5, waiting: 2, people: 3 },
{ time: '10:35', call: 8, waiting: 2, people: 1 },
{ time: '10:40', call: 13, waiting: 1, people: 2 },
],
children: [
{
type: 'interval',
encode: { x: 'time', y: 'waiting' },
axis: { y: { title: 'Waiting', titleFill: '#5B8FF9' } },
},
{
type: 'line',
encode: { x: 'time', y: 'people', shape: 'smooth' },
scale: { y: { independent: true } }, // 设置 y 方向比例尺不同步
style: { stroke: '#fdae6b', lineWidth: 2 },
axis: {
y: {
position: 'right',
grid: null,
title: 'People',
titleFill: '#fdae6b',
},
},
},
],
});
chart.render();
return chart.getContainer();
})();

如果希望比例尺分组同步,可以声明 scale.key,拥有相同 key 的 scale 会同步。比如下面的 Line 和 Point Mark y 通道的比例尺因为 key 都是 line 所以会同步。

(() => {
const chart = new G2.Chart();
chart.options({
type: 'view',
data: [
{ time: '10:10', call: 4, waiting: 2, people: 2 },
{ time: '10:15', call: 2, waiting: 6, people: 3 },
{ time: '10:20', call: 13, waiting: 2, people: 5 },
{ time: '10:25', call: 9, waiting: 9, people: 1 },
{ time: '10:30', call: 5, waiting: 2, people: 3 },
{ time: '10:35', call: 8, waiting: 2, people: 1 },
{ time: '10:40', call: 13, waiting: 1, people: 2 },
],
children: [
{
type: 'interval',
encode: { x: 'time', y: 'waiting' },
axis: { y: { title: 'Waiting', titleFill: '#5B8FF9' } },
},
{
type: 'line',
encode: { x: 'time', y: 'people', shape: 'smooth' },
scale: { y: { key: 'line' } }, // 设置 key 为 line
style: { stroke: '#fdae6b', lineWidth: 2 },
axis: {
y: {
position: 'right',
grid: null,
title: 'People',
titleFill: '#fdae6b',
},
},
},
{
type: 'point',
encode: { x: 'time', y: 'people' },
scale: { y: { key: 'line' } }, // 设置 key 为 line
style: { stroke: '#fdae6b', lineWidth: 2 },
},
],
});
chart.render();
return chart.getContainer();
})();

视图比例尺

比例尺会可以配置在视图层级,并且会传递给 children 指定的标记,如果该标记对应的通道没有设置比例尺,就设置,否则没有影响。在不绘制多轴图的情况下,比例尺是可以设置在视图层级的。

(() => {
const chart = new G2.Chart();
chart
.data([
{ year: '1991', value: 3 },
{ year: '1992', value: 4 },
{ year: '1993', value: 3.5 },
{ year: '1994', value: 5 },
{ year: '1995', value: 4.9 },
{ year: '1996', value: 6 },
{ year: '1997', value: 7 },
{ year: '1998', value: 9 },
{ year: '1999', value: 13 },
])
.encode('x', 'year')
.encode('y', 'value')
.scale('y', { nice: true }); // 视图层级的比例尺设置
chart.line();
chart.point();
chart.render();
return chart.getContainer();
})();

常见比例尺

常见的比例尺一共分为三大类:

  • 连续比例尺
  • 离散比例尺
  • 离散化比例尺

连续比例尺

第一种比例尺是连续比例尺,主要针对是连续数据,比较常见的连续比例尺有:Linear,Time,Log 等。比如下面的散点图的 x 和 y 通道都是使用了 linear 比例尺。

(() => {
const chart = new G2.Chart();
chart
.point()
.data({
type: 'fetch',
value:
'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
})
.encode('x', 'weight') // weight 是一个连续的数据
.encode('y', 'height') // height 是一个连续的数据
.encode('color', 'gender');
chart.render();
return chart.getContainer();
})();

序数比例尺

第二种比例尺是序数比例尺,主要针对离散数据,比较常见的序数比例尺有:ordinal,point 等。比如下面的条形图的 color 通道就是用了 ordinal 比例尺。

(() => {
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')
.encode('color', 'genre') // genre 是一个离散数据
.scale('color', {
// 指定映射后的颜色
range: ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#c564be'],
});
chart.render();
return chart.getContainer();
})();

离散化比例尺

第三种比例尺是离散化比例尺,该比例尺主要针对连续数据,会将它们离散化之后再映射,比如 threshold,quantize 等。下面的 color 通道就用了 quantile 比例尺。

(() => {
const chart = new G2.Chart({
height: 240,
});
chart
.cell()
.data({
type: 'fetch',
value:
'https://gw.alipayobjects.com/os/bmw-prod/89c20fe8-0c6f-46c8-b36b-4cb653dba8ed.json',
transform: [{ type: 'map', callback: (d) => ({ salary: d }) }],
})
.scale('color', {
type: 'quantile',
// 分成三组,每组对应下面的一个颜色
range: ['#eee', 'pink', 'red'],
})
.encode('y', (_, i) => (i % 5) + 1)
.encode('x', (_, i) => ((i / 5) | 0) + 1)
.encode('color', 'salary') // 是连续数据,比例尺按照分位数对数据进行分组
.style('stroke', '#000')
.style('inset', 2);
chart.render();
return chart.getContainer();
})();