Angular中ag-grid Pie Chart初始隐藏指定图例项的实现问询

AG Grid Charts 提供了hiddenCategories配置项，可直接实现单系列饼图中部分分类的初始隐藏，且完全兼容图例的点击切换功能，正好匹配你的需求。

具体实现步骤 #

• 在图表配置的series节点下，添加hiddenCategories属性，传入需要初始隐藏的分类标签数组
• 图例默认支持点击切换显示状态，无需额外配置监听器

代码示例 #

以你提供的测试数据为例，初始隐藏Android和iOS：

export function getData() {
    return [
        { label: 'Android', value: 56.9 },
        { label: 'iOS', value: 22.5 },
        { label: 'BlackBerry', value: 6.8 },
        { label: 'Symbian', value: 8.5 },
        { label: 'Bada', value: 2.6 },
        { label: 'Windows', value: 1.9 },
    ];
}

// 组件内的图表配置
chartOptions = {
  series: [
    {
      type: 'pie',
      data: getData(),
      // 配置初始隐藏的分类标签
      hiddenCategories: ['Android', 'iOS']
    }
  ],
  legend: {
    enabled: true,
    item: {
      toggleSeriesVisible: true // 确保图例项可点击切换（默认开启）
    }
  }
};

对应你的业务场景，只需将3个成功状态的分类标签填入hiddenCategories数组即可：

hiddenCategories: ['成功状态1', '成功状态2', '成功状态3']

原理说明 #

hiddenCategories是AG Grid Pie Series的原生配置，专门用于控制单系列下分类的初始可见性，无需拆分多系列。图例交互逻辑与该配置完全兼容，用户点击图例项时，对应分类会自动在显示/隐藏状态间切换。

内容的提问来源于stack exchange，提问作者Nili