如何操作AgChartsReact图表图例项 自定义默认选中状态

问题描述 #

使用Ag Grid独立图表组件AgChartsReact时，未找到官方提供的专用API或配置项，用来设置图例项的默认选中/显示状态。组件默认行为是初始化时将所有图例项置为选中状态，无法直接满足自定义默认选中项的需求：例如初始化时仅选中diesel图例项，petrol图例项默认展示为未选中状态，效果参考：

已尝试的思路 #

• 图表基于canvas元素渲染，曾尝试通过useRef获取canvas上下文直接操作图例项，但未找到具体实现路径，无法确认方案可行性。
• 已实现当前图例激活/未激活状态的获取方法，代码如下：

const getLegendStatuses = () => {
  const [changeEvent] = chartRef.current.chart.legend.allEventListeners.get("change");
  const [, data] = changeEvent;
  const [event] = data;
  console.log(
    event.data.map(({ enabled, label }) =>  ({ label: label.text, enabled }))
  );
}

实现方案 #

无需操作canvas上下文，在图表加载完成回调中，通过图表实例自带的图例方法即可实现默认状态控制，具体步骤：

1. 为AgChartsReact组件绑定ref，同时监听onChartReady事件，确保图表完全初始化后再执行状态修改
2. 由于组件默认所有系列为显示态，找到需要默认置为未选中的图例项索引，调用legend.toggleItem方法设置为未选中即可，该方法效果与用户手动点击图例切换完全一致，不影响后续用户的交互操作。

完整示例代码：

import { AgChartsReact } from 'ag-charts-react';
import { useRef } from 'react';

const CustomLegendChart = () => {
  const chartRef = useRef(null);
  // 图表基础配置
  const chartOptions = {
    // 替换为实际业务数据
    data: [],
    series: [
      { type: 'column', xKey: 'year', yKey: 'diesel', name: 'diesel' },
      { type: 'column', xKey: 'year', yKey: 'petrol', name: 'petrol' }
    ],
    // 其余axes、legend等配置按需添加
  };

  const onChartReady = () => {
    const chartInstance = chartRef.current.chart;
    // 方式1：按系列顺序传索引，petrol是第二个系列，索引为1
    chartInstance.legend.toggleItem(1, false);

    // 方式2：按图例名称匹配，避免系列顺序变动导致失效
    // const legendItemList = chartInstance.legend.data;
    // const targetIndex = legendItemList.findIndex(item => item.label.text === 'petrol');
    // if (targetIndex !== -1) {
    //   chartInstance.legend.toggleItem(targetIndex, false);
    // }
  };

  return (
    <AgChartsReact
      ref={chartRef}
      options={chartOptions}
      onChartReady={onChartReady}
      // 如需持久化图例状态，可监听legendChange事件，结合getLegendStatuses方法存储状态
      onLegendChange={getLegendStatuses}
    />
  );
};

提示：如果需要记住用户上次操作后的图例状态，可在图例变更事件中用之前实现的状态获取方法把选中状态存在本地存储，下次初始化时在onChartReady回调里遍历存储的状态，批量调用toggleItem即可还原上次的选中效果。

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