请教一下堆叠图是否支持图二多度量，分别设置color和size通道

[zhouhe-1476452306]

图一

图二

[pearmini]

可以提供一份数据吗？

[zhouhe-1476452306]

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

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

chart
  .interval()
  .transform({type: 'stackY'})
  .data([
    { month: 'Jan.', type:'A',  value: 1 },
    { month: 'Jan.', type:'B',  value: 1 },
    { month: 'Feb.', type:'A',  value: 2 },
    { month: 'Feb.', type:'B',  value: 2 },
    { month: 'Mar.', type:'B',  value: 3 },
    { month: 'Apr.', type:'B',  value: 1 },
    { month: 'May',  type:'A',  value: 5 },
  ])
  .encode('x', 'month')
  .encode('y', 'value')
  .encode('color', 'type')
  .encode('series', () => {
    return "value1"
  })
  .scale('size', {
    independent: true,
    range: [10, 20]
  })

chart
  .interval()
  .transform({type: 'stackY'})
  .data([
    { month: 'Jan.', c: '1',  value: 2 },
    { month: 'Jan.', c: '2',  value: 3 },
    { month: 'Feb.', c: '1',  value: 1 },
    { month: 'Feb.', c: '3',  value: 1 },
    { month: 'Mar.', c: '4',  value: 5 },
    { month: 'Apr.', c: '1',  value: 1 },
    { month: 'Apr.', c: '4',  value: 2.5 },
    { month: 'May',  c: '1',  value: 2 },
  ])
  .encode('x', 'month')
  .encode('y', 'value')
  .encode('color', 'c')
  .encode('series', () => {
    return "value"
  })
  .scale('size', {
    independent: true,
    range: [10, 20]
  })
  .scale('color', {
    domain:['1','2','3','4'],
    range: ['red','green','yellow','gray'],
    independent: true,
  })
chart.render();

[pearmini]

这样？

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

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

const data0 = [
  { month: 'Jan.', type: 'A', value: 1 },
  { month: 'Jan.', type: 'B', value: 1 },
  { month: 'Feb.', type: 'A', value: 2 },
  { month: 'Feb.', type: 'B', value: 2 },
  { month: 'Mar.', type: 'B', value: 3 },
  { month: 'Apr.', type: 'B', value: 1 },
  { month: 'May', type: 'A', value: 5 },
];

const data1 = [
  { month: 'Jan.', c: '1', value: 2 },
  { month: 'Jan.', c: '2', value: 3 },
  { month: 'Feb.', c: '1', value: 1 },
  { month: 'Feb.', c: '3', value: 1 },
  { month: 'Mar.', c: '4', value: 5 },
  { month: 'Apr.', c: '1', value: 1 },
  { month: 'Apr.', c: '4', value: 2.5 },
  { month: 'May', c: '1', value: 2 },
];

chart
  .interval()
  .data([...data0, ...data1])
  .encode('x', 'month')
  .encode('y', 'value')
  .encode('color', (d) => (d.type ? d.type : d.c))
  .transform({ type: 'stackY' })
  .scale('color', {
    relations: [
      ['1', 'red'],
      ['2', 'green'],
      ['3', 'yellow'],
      ['4', 'gray'],
    ],
  });

chart.render();