Highcharts - Серый только титул в легенде

Question

Возможно ли выделять серым только заголовок скрытой серии в легенде Highcharts (не цветовой маркер)?Изображение стоит 1000 слов.

Answer 1

В качестве альтернативы, упаковка Legend.colorizeItem, которая обрабатывает элементы легенды legendLine и legendSymbol для «отмены» установки скрытого цвета:

(function (H) {
    H.wrap(H.Legend.prototype, 'colorizeItem', function (proceed, item, visible) {
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
        if(item.legendLine) {
            item.legendLine.attr({ stroke: item.color });
        }
        if(item.legendSymbol) {
            if ((item.options && item.options.marker) && item.legendSymbol.isMarker)
                item.legendSymbol.attr(item.pointAttribs());
            else
                item.legendSymbol.attr({ fill: item.color });
        }
    });
}(Highcharts));

Сложный код для item.LegendSymbol предназначен для сохранения любых параметров маркера, которые могут быть установлены. Он имитирует поведение по умолчанию colorizeItem без учета правдивости visible.

См. эту демонстрацию JSFiddle ее использования.

Answer 2

Вы можете применить CSS для стилизации легенды для достижения желаемого эффекта.

В частности, используйте класс highcharts-legend-item-hidden, который добавляется к каждому элементу легенды (т. Е. После того, как на него нажимают, чтобы скрыть серию), чтобы цвет маркера оставался одинаковым.

Например, чтобы маркер легенды первого ряда данных всегда оставался как #ff6600:

.highcharts-series-0.highcharts-legend-item-hidden .highcharts-graph {
    stroke: #ff6600;
}
.highcharts-series-0.highcharts-legend-item-hidden .highcharts-point {
    fill: #ff6600;
}

Вот демонстрация.