Пользовательские стили на легендах 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

EDIT:

Я сделал jsfiddle для переключения CSS ваших элементов легенды.

Вы можете установить класс для своей легенды на клик, как это,

events: {
  legendItemClick: function(event) {
                     //console.log(event);
                     if(this.visible)
                       event.target.legendItem.element.firstChild.className = 'span-legend-item-inactive';
                     else
                       event.target.legendItem.element.firstChild.className = 'span-legend-active';
                   }
  }

Здесь this.visible - это логическая переменная, заданная Hightcharts, для обозначения, является ли легенда видимой или нет. Проверьте эту ссылку jsfiddle с сайта highcharts.

Если он виден во время onclick, вы можете назначить свой класс .span-legend-item-inactive, чтобы отключить его. Точно так же, если он не виден во время onclick, вы можете назначить .span-legend-active, чтобы он выглядел включенным. Вы можете дать разделенные пробелами имена классов, если вы хотите назначить более одного класса или использовать event.target.legendItem.element.firstChild.classList

Кроме того, Highcharts передает объекту этих событий функции event. Вы можете утешить его и проверить методы или переменные, которые вы можете использовать для своих целей.

Кроме того, this.color даст цвет строки текущей серии. Таким образом, вы можете использовать это для установки цвета вашей легенды или цвета рамки в labelFormatter с чем-то вроде этого,

return `<span class="span-legend-active" style="border-color:${this.color}">${this.name}</span>`

Ссылка на jsfiddle .

Старый ответ:

labelFormatter () не предоставляет никаких аргументов для функции, поэтому clickCounter не определен.

Так что не передавайте clickCounter в функцию labelFormatter, это будет происходить из глобальной области видимости.

   legend: {
        useHTML: true,
        labelFormatter: function () {}
    }

Answer 2

Я думаю, вам не нужно использовать событие legendItemClick для этого. Вы можете попробовать изменить ваши CSS-селекторы с помощью:

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

Ваш модифицированный код здесь .