2

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

默认行为 我想要的是

4

2 回答 2

4

作为替代方案，其中的包装对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 演示。

于 2018-09-18T09:00:55.520 回答
3

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

这是一个演示。

于 2018-09-18T00:56:47.880 回答