Highcharts 图例中的颜色与范围图表

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

链接到JSFIDLE：

---

为了达到预期效果，需要应用一点

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选择器以其他方式使用do it，并将其设置为：

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

实例：

---

实时示例（仅CSS）：

感谢您的帮助。但图表位于包含其他内容的页面中。如何使该功能不影响其他海图？没有更简单的解决方案？这源于我提供系列的方式？如果您的页面包含其他图表，则有必要向现有函数覆盖添加短条件。它应该只适用于

xrange

类型的所有图表，或者您想将其用于某些特定的图表？当然还有其他选项（例如添加新的CSS定义），但是这个选项看起来最通用，因为您在系列中设置的所有内容都应该被处理，并且颜色会自动添加。我在上面编辑了我的帖子，并通过CSS解决方案对其进行了扩展。再次感谢。这两种解决方案都很有效。在我的项目中，我想我将使用css解决方案，使用一些php代码生成的样式表。祝您有个美好的一天。

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