Highcharts-在图例中仅灰显标题

Question

是否可以在高图图例中仅将隐藏的系列的标题变灰（而不是颜色标记）？图片价值1000字。

Answer 1

您可以应用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;
}

Here's a demonstration.

Answer 2

作为替代方案，使用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的真实性。

查看其中的this JSFiddle demonstration。