javascript - Highcharts 图例上的自定义样式

Question

我对 Highcharts 图例有自定义样式，效果很好。当我单击该元素时，我想应用其他样式来给人禁用按钮的印象。为了实现这一目标，我使用了计数器，即当计数器为偶数时，应应用事件样式，而在奇数计数器上应使用非事件样式。这无法正常工作，我猜问题出在范围上。请找到下面的代码:

var clickCounter = 0;
Highcharts.chart('container', {

    plotOptions: {

        series: {
            events: {
                legendItemClick: function () {
                    clickCounter++;
                    return clickCounter;
                }
            },
            showInLegend: true
        }
    },

    legend: {
        useHTML: true,
        labelFormatter: function (clickCounter) {
        		if(clickCounter%2 == 0)
            return '<span class="span-legend-active">' + this.name + '</span>'
            else
            return '<span class="span-legend-item-inactive">' + this.name + '</span>'
        }
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        data: [11.9, 31.5, 78.4, 29.2, 44.0, 76.0, 95.6, 48.5, 116.4, 114.1, 35.6, 154.4]
    }]
});

.span-legend-active {
    background-color: white;
    border: 1px solid green;
    /* border: none; */
    color: black;
    padding: 3px 7px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
    
}

.span-legend-item-inactive {
    background-color: white;
    border: 1px solid #cccccc;
    color: #cccccc;
    padding: 3px 7px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
  
}

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

<div id="container" style="height: 400px"></div>

感谢任何帮助

Answer 1

我认为您不需要使用 legendItemClick 事件来执行此操作。您可以尝试更改 CSS 选择器:

.highcharts-legend-item > span > span {
    (active style)
}
.highcharts-legend-item-hidden > span > span {
    (inactive style)
}

您修改后的代码here .