如何在Highcharts中点击图例时降低图表系列透明度而非隐藏

嘿，刚好能帮你搞定这个需求！想要点击图例时不让对应系列直接消失，而是把它的透明度改成0.34？其实只要修改一下legendItemClick事件的逻辑就行，我给你调整好代码，再拆解下关键点：

核心修改点 #

我们需要阻止Highcharts默认的图例点击隐藏行为，然后手动控制系列的透明度，同时同步更新图例项的样式，让用户能直观看到当前状态：

在你的plotOptions.series.events里，把legendItemClick函数改成这样：

legendItemClick: function(event) {
    // 阻止默认的隐藏/显示系列的行为
    event.preventDefault();
    // 切换系列透明度：当前正常则设为0.34，已透明则恢复1
    const targetOpacity = this.opacity === 0.34 ? 1 : 0.34;
    this.update({ opacity: targetOpacity });
    // 同步更新图例项的透明度，让交互反馈更直观
    this.legendItem.css({ opacity: targetOpacity });
}

完整代码示例 #

替换后的完整图表代码如下：

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Monthly Average Rainfall'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: [
            'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Rainfall (mm)'
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        },
        series: {
            events: {
                legendItemClick: function(event) {
                    event.preventDefault();
                    const targetOpacity = this.opacity === 0.34 ? 1 : 0.34;
                    this.update({ opacity: targetOpacity });
                    this.legendItem.css({ opacity: targetOpacity });
                }
            }
        }
    },
    series: [{
        name: 'Tokyo',
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4,
            194.1, 95.6, 54.4]
    }, {
        name: 'New York',
        data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5,
            106.6, 92.3]
    }, {
        name: 'London',
        data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3,
            51.2]
    }, {
        name: 'Berlin',
        data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8,
            51.1]
    }]
});

效果说明 #

现在每次点击图例项，对应系列的柱状图就会在**完全显示（透明度1）和半透明（透明度0.34）**之间切换，而且图例本身也会同步显示对应透明度，用户一眼就能分辨哪些系列是“淡化”状态啦～

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