多个通道的图例

[Aarebecca]

组件预览

category
res: visx
目前 GUI 除 Custom Legend 不支持图例项纵向布局外，其余能力均支持

continuous
continuous:

continuousSize

continuousBlockSize

continuousBlock

通道、Scale - 组件场景

channel	scale	component
color / opacity	连续比例尺	continuous

World Life Expectancy

---

channel	scale	component
color / opacity	分类比例尺	continuous

Beijing API

Contour Plots 推荐

---

channel	scale	component
color / opacity	离散比例尺	category

Bar

---

channel	scale	component
size	连续比例尺	continuousSize

continuousSize 支持同时显示 color 和 size
AQI 气泡图

---

channel	scale	component
size	分类比例尺	continuousBlockSize

将 bmi 同时编码到 size 和 color 通道

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

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart
  .point()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/basement_prod/6b4aa721-b039-49b9-99d8-540b3f87d339.json',
    transform: [
      {
        type: 'custom',
        callback: (data) => data.map(datum => ({ ...datum, bmi: datum.weight / Math.pow(datum.height, 2) * 10000 }))
      }
    ]
  })
  .encode('x', 'height')
  .encode('y', 'weight')
  .encode('color', 'bmi')
  .encode('size', 'bmi')
  .scale('color', {
    type: 'threshold',
    domain: [20, 25, 30],
    range: ['#efb041', '#72c140', '#3875f6', 'red']
  })

chart.render();

---

channel	scale	component
shape	离散比例尺	category

Olympics athletes by height and weight