Highcharts动态修改柱体透明度：默认高亮首柱，点击后高亮目标柱

以下是完全符合需求的实现代码，包含默认高亮第一个柱体、点击切换高亮的完整逻辑：

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: '柱体透明度动态切换示例'
    },
    xAxis: {
        categories: ['总计', '分类A', '分类B', '分类C', '分类D']
    },
    yAxis: {
        title: {
            text: '数值'
        }
    },
    plotOptions: {
        column: {
            point: {
                events: {
                    // 点击柱体时切换高亮状态
                    click: function() {
                        const allPoints = this.series.points;
                        allPoints.forEach(point => {
                            point.graphic.attr({
                                opacity: point === this ? 1 : 0.2
                            });
                        });
                    }
                }
            }
        },
        series: {
            events: {
                // 图表加载完成后默认高亮第一个柱体
                load: function() {
                    const allPoints = this.points;
                    allPoints.forEach((point, index) => {
                        point.graphic.attr({
                            opacity: index === 0 ? 1 : 0.2
                        });
                    });
                }
            }
        }
    },
    series: [{
        name: '数据',
        data: [50, 30, 40, 25, 35]
    }]
});

关键逻辑说明 #

• 默认高亮设置：通过series.events.load事件，在图表渲染完成后遍历所有柱体点，将第一个点（总计行）的透明度设为1，其余设为0.2
• 点击切换逻辑：通过column.point.events.click事件，点击任意柱体时，遍历所有点，将当前点击的点透明度设为1，其余统一设为0.2
• 核心操作：通过Highcharts点对象的graphic.attr()方法直接修改柱体的透明度样式

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