如何让ag-charts中的元素（如单个柱状条）保持高亮状态？

可以通过状态管理+自定义动态样式的方式实现，具体步骤如下：

1. 维护选中状态 #

在代码里（React/Vue的状态、纯JS变量均可）保存当前选中的柱子数据，比如用selectedBar，初始值设为null。如果需要多选，就改用数组selectedBars。

2. 监听柱子点击事件 #

利用AG Charts提供的seriesClick事件（不同框架绑定方式略有差异），在点击回调里更新选中状态：

• 点击未选中的柱子：将该柱子的数据赋值给selectedBar
• 点击已选中的柱子：清空selectedBar实现取消选中

3. 动态配置柱子样式 #

在series配置项中，通过函数动态返回fill（填充色）、stroke（边框色）、strokeWidth（边框宽度）这些样式属性。判断当前柱子的datum是否和选中状态匹配，匹配就返回高亮样式，否则用默认样式。

示例代码（React） #

import { AgCharts } from 'ag-charts-react';
import { useState } from 'react';

function HighlightableBarChart() {
  // 保存选中的柱子数据
  const [selectedBar, setSelectedBar] = useState(null);

  // 处理柱子点击事件
  const handleBarClick = ({ datum }) => {
    // 点击同一柱子切换选中状态
    setSelectedBar(prev => prev === datum ? null : datum);
  };

  const chartOptions = {
    data: [
      { group: '产品A', sales: 45 },
      { group: '产品B', sales: 62 },
      { group: '产品C', sales: 38 },
      { group: '产品D', sales: 71 },
    ],
    series: [
      {
        type: 'bar',
        xKey: 'group',
        yKey: 'sales',
        // 动态设置填充色
        fill: ({ datum }) => datum === selectedBar ? '#1E88E5' : '#4CAF50',
        // 动态设置边框色
        stroke: ({ datum }) => datum === selectedBar ? '#0D47A1' : 'transparent',
        // 动态设置边框宽度
        strokeWidth: ({ datum }) => datum === selectedBar ? 3 : 0,
      },
    ],
    axes: [
      { type: 'category', position: 'bottom' },
      { type: 'number', position: 'left' },
    ],
  };

  return (
    <AgCharts 
      options={chartOptions} 
      onSeriesClick={handleBarClick} 
    />
  );
}

补充说明 #

• 纯JS环境逻辑一致：用变量保存选中状态，通过chart.addEventListener('seriesClick', (event) => {...})绑定事件，配置样式时传入函数即可。
• 多选场景：把selectedBar改成数组selectedBars，点击时判断数据是否在数组中，存在则移除，不存在则添加；样式判断用selectedBars.includes(datum)。
• 数据匹配注意事项：如果数据是后端返回的对象，可能存在引用不一致的问题，这时可以用唯一标识（比如id）来比较，比如datum.id === selectedBar.id。

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