如何在Highcharts柱状图的不同分组柱子上设置不同光标？

当然可以通过编程方式实现，完全不需要依赖CSS，下面针对常见图表库给出具体方案，适配上百个分组的批量处理需求：

方案1：系列配置直接指定（已知分组名称时首选） #

以ECharts为例，在定义图表系列时，直接给不同分组的系列设置cursor属性，还可以通过循环批量处理大量分组：

const chartData = [
  { name: 'Total', data: [10, 20, 30] },
  { name: 'tires', data: [15, 25, 35] },
  // 这里可以放其他上百个分组的数据
  ...otherGroupData
];

const option = {
  xAxis: { type: 'category', data: ['A', 'B', 'C'] },
  yAxis: { type: 'value' },
  series: chartData.map(group => ({
    name: group.name,
    type: 'bar',
    data: group.data,
    // 根据分组名称判断光标类型
    cursor: group.name === 'tires' ? 'pointer' : 'default'
  }))
};

// 初始化图表
const myChart = echarts.init(document.getElementById('container'));
myChart.setOption(option);

方案2：事件监听动态设置（动态分组场景） #

如果分组是动态加载或规则复杂，可通过图表的鼠标事件实时判断并设置光标，以Highcharts为例：

Highcharts.chart('container', {
  chart: {
    type: 'bar',
    events: {
      // 鼠标悬停时触发
      mouseOver: function(e) {
        const targetSeries = e.point.series;
        const cursorStyle = targetSeries.name === 'tires' ? 'pointer' : 'default';
        e.point.graphic.element.style.cursor = cursorStyle;
      },
      // 鼠标离开时恢复默认（可选）
      mouseOut: function(e) {
        e.point.graphic.element.style.cursor = 'default';
      }
    }
  },
  xAxis: { categories: ['A', 'B', 'C'] },
  series: [/* 动态生成的系列数组 */]
});

方案3：数据项自定义属性（细粒度控制） #

如果需要针对单个柱子而非整个分组设置光标，可以在数据项中添加自定义标记，再通过配置映射：

// ECharts示例
const option = {
  // 其他配置...
  xAxis: { type: 'category', data: ['A', 'B', 'C'] },
  yAxis: { type: 'value' },
  series: [
    {
      name: 'tires',
      type: 'bar',
      data: [
        { value: 15, clickable: true },
        { value: 20, clickable: false }, // 这个柱子用默认光标
        { value: 35, clickable: true }
      ],
      emphasis: {
        cursor: (params) => params.data.clickable ? 'pointer' : 'default'
      }
    }
  ]
};

核心逻辑就是通过分组名称或自定义标记识别目标柱形，再通过图表API直接绑定光标样式，完全不需要CSS，而且能轻松处理上百个分组的批量配置。

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