如何为Highcharts图例中特定系列标签修改样式（禁用RGBA/HSLA）

使用Highcharts构建分组堆叠柱状图展示往年与当年KPI差异时，通过设置series.opacity为0.7将2021年系列柱子设为半透明，但该透明度未作用于图例。需在不使用rgba()或hsla()颜色的前提下，修改这些特定系列的图例样式。

JavaScript代码 #

Highcharts.chart('container_flow', {
    colors: ['#F66','#999'],
    chart: {
        type: 'column',
        margin: undefined
    },
    xAxis: {
        type: 'datetime',
        labels: {
            formatter: function() {
                let label;return Highcharts.dateFormat('%B', this.value);
            }
        }
    },
    yAxis: {
        reversedStacks:false,
        min: 0,
        title: {text: 'KPI'},
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'white'
            }
        }
    },
    legend: {
        align: 'left',
        verticalAlign: 'bottom',
        y: 20,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
        borderColor: '#CCC',
        shadow: false
    },
    tooltip: {
        formatter: function () {
            var s = '<b>' + Highcharts.dateFormat('%d-%m-%Y', new Date(this.x)) + '</b><br/>Hay:';

            $.each(this.points, function () {
                s += '<br/><span style="color:' + this.series.color + '">●</span>: ' + this.y + ' ' + this.series.name;
            });

            return s;
        },
        shared: true
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {enabled: true, }
        }
    },
    series: [
            {
                name: 'Open 2021',
                data: [[Date.parse('2022-01'),10],[Date.parse('2022-02'),10],[Date.parse('2022-03'),15],[Date.parse('2022-04'),4],[Date.parse('2022-05'),7],[Date.parse('2022-06'),10],[Date.parse('2022-07'),13],[Date.parse('2022-08'),8],[Date.parse('2022-09'),8],],
        opacity: 0.7,
                stack: 'past'
            },{
                name: 'Closed 2021',
                data: [[Date.parse('2022-10'),4],[Date.parse('2022-02'),11],[Date.parse('2022-03'),7],[Date.parse('2022-04'),7],[Date.parse('2022-05'),3],[Date.parse('2022-06'),7],[Date.parse('2022-07'),9],[Date.parse('2022-08'),2],[Date.parse('2022-09'),3],],
        opacity: 0.7,
                stack: 'past'
            },
            {
                name: 'Open 2022',
                data: [[Date.parse('2022-01'),10],[Date.parse('2022-02'),10],[Date.parse('2022-03'),15],[Date.parse('2022-04'),4],[Date.parse('2022-05'),7],[Date.parse('2022-06'),10],[Date.parse('2022-07'),13],[Date.parse('2022-08'),8],[Date.parse('2022-09'),8],],
                stack: 'curr'
            },{
                name: 'Closed 2022',
                data: [[Date.parse('2022-10'),5],[Date.parse('2022-02'),29],[Date.parse('2022-03'),29],[Date.parse('2022-04'),9],[Date.parse('2022-05'),7],[Date.parse('2022-06'),19],[Date.parse('2022-07'),28],[Date.parse('2022-08'),9],[Date.parse('2022-09'),19],],
                stack: 'curr'
            }   ]
});

HTML代码 #

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container_flow"></div>

方法一：仅调整图例颜色块的透明度 #

通过图表加载完成事件，遍历系列并筛选出2021年的对应项，单独修改图例符号的透明度：

修改chart配置，添加events.load事件：

chart: {
    type: 'column',
    margin: undefined,
    events: {
        load: function() {
            const chart = this;
            chart.series.forEach(series => {
                if (series.name.includes('2021')) {
                    const legendSymbol = series.legendItem.element.querySelector('.highcharts-point');
                    if (legendSymbol) {
                        legendSymbol.style.opacity = series.options.opacity;
                    }
                }
            });
        }
    }
},

方法二：调整整个图例项（含文字）的透明度 #

如果需要让图例的文字也同步半透明，可直接在2021年的系列配置中添加legendItemStyle：

{
    name: 'Open 2021',
    data: [...],
    opacity: 0.7,
    stack: 'past',
    legendItemStyle: { opacity: 0.7 }
},
{
    name: 'Closed 2021',
    data: [...],
    opacity: 0.7,
    stack: 'past',
    legendItemStyle: { opacity: 0.7 }
}

两种方法都无需修改颜色格式，直接通过CSS透明度属性实现需求。

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