AntV G2Plot 分组柱状图限制图例选择数量

在 G2Plot 分组柱状图 Column 中，最多可以选择三个图例的方法如下：

使用 G2Plot 的 legend 控制器来控制图例的显示。在 legend 控制器中设置 maxAllowChecked 来限制最多选择的图例数量。例如：

legend: {
  maxAllowChecked: 3,
},

对于需要限制图例数量的场景，可以使用 G2Plot 的 facet 分面布局。facet 分面布局可以将数据集分成多个小的面板，每个面板都包含相同的图表类型和配置。但是，每个面板只显示部分数据集。这样就可以实现在一个图表中显示多个子图表，并且限制每个子图表中的图例数量。例如：

import {Column} from '@antv/g2plot';

const data = [
  { year: '2004', type: 'Sales', value: 100 },
  { year: '2005', type: 'Sales', value: 117 },
  { year: '2006', type: 'Sales', value: 66 },
  { year: '2007', type: 'Sales', value: 80 },
  { year: '2008', type: 'Sales', value: 120 },
  { year: '2009', type: 'Sales', value: 90 },
  { year: '2010', type: 'Sales', value: 113 },
  { year: '2011', type: 'Sales', value: 107 },
  { year: '2012', type: 'Sales', value: 88 },
  { year: '2013', type: 'Sales', value: 84 },
  { year: '2004', type: 'Expenses', value: 60 },
  { year: '2005', type: 'Expenses', value: 80 },
  { year: '2006', type: 'Expenses', value: 50 },
  { year: '2007', type: 'Expenses', value: 70 },
  { year: '2008', type: 'Expenses', value: 90 },
  { year: '2009', type: 'Expenses', value: 88 },
  { year: '2010', type: 'Expenses', value: 94 },
  { year: '2011', type: 'Expenses', value: 60 },
  { year: '2012', type: 'Expenses', value: 130 },
  { year: '2013', type: 'Expenses', value: 110 },
];

const columnPlot = new Column('container', {
  data,
  xField: 'year',
  yField: 'value',
  seriesField: 'type',
  isGroup: true,
  facet: {
    rowFields: ['type'],
    columnFields: ['year'],
    eachView: (view, facet) => {
      view.filter('type', (type) => {
        const typeIndex = facet.rowIndex;
        return typeIndex === 0 ? true : typeIndex + 1 === type;
      });
      view.legend({
        maxAllowChecked: 3,
      });
    },
  },
});

columnPlot.render();

上面的代码中，使用了 facet 分面布局来将数据集分成两个面板，每个面板都有一个 type 值和一个 year 值。在每个面板中，使用 eachView 回调函数来设置对应的筛选条件和图例最多选择的数量。这样就可以实现在一个图表中显示多个子图表，并且限制每个子图表中的图例数量。