Question

我无法设置highchart，以使字幕的颜色与系列的颜色匹配。你能帮助我吗？默认情况下，当前的hightchart图形会执行此操作，但是在一定范围内，它似乎不会自动执行。顺便说一下，在highchart演示中，它也没有这样做。

链接到jsfiddle：

<ul class="nav nav-tabs nav-justified">
    <li id="concept"><a href="#">Concept</a></li>
    <li id="code"><a href="#">Code</a></li>
    <li id="read"><a href="#">Read</a></li>
    <li id="action"><a href="#">Action</a></li>
</ul>

<script>
    $(document).ready(
        var cachedTabId = sessionStorage.getItem('selected-tab');
        if(cachedTab) $("#"+cachedTabId).addClass("active");
        $(".nav-tabs li").on("click", function(){
            $(".nav-tabs li").removeClass("active");
            $(this).addClass("active");
            sessionStorage.setItem('selected-tab', $(this).attr('id'));
        }));
</script>

Answer 1

为了达到您期望的效果，您需要应用一些Legend.prototype.getAllItems覆盖：

(function(H) {
  H.Legend.prototype.getAllItems = function () {
                var allItems = [];
                H.each(this.chart.series, function (series) {
                    var seriesOptions = series && series.options;
                    if (series.type === 'xrange') {
                        series.color = series.userOptions.color
                    }
                    // Handle showInLegend. If the series is linked to another series,
                    // defaults to false.
                    if (series && H.pick(
                        seriesOptions.showInLegend,
                        !H.defined(seriesOptions.linkedTo) ? undefined : false, true
                    )) {

                        // Use points or series for the legend item depending on
                        // legendType
                        allItems = allItems.concat(
                            series.legendItems ||
                            (
                                seriesOptions.legendType === 'point' ?
                                    series.data :
                                    series
                            )
                        );
                    }
                });

                H.fireEvent(this, 'afterGetAllItems', { allItems: allItems });

                return allItems;
            }
})(Highcharts)

然后，系列中定义的颜色应填充图例项目点。它仅适用于xrange系列，因此您不必担心放置在应用程序中的其他系列的图表。您还可以通过添加 CSS 选择器并进行如下设置来以其他方式使用它：

.highcharts-legend-item.highcharts-series-0 .highcharts-point {
  fill: red !important;
}
.highcharts-legend-item.highcharts-series-1 .highcharts-point {
  fill: blue !important;
}

实时示例：https://jsfiddle.net/y7xp4w8u/

实时示例（仅CSS）：https://jsfiddle.net/xmornj1u/

图例中的颜色带有范围图表

1 个答案: