Javascript 在Highstock/Highcharts中设置rangeSelector容器的背景色

我有一个Highcharts图表，需要修改

范围选择器

部分。我已经能够格式化一些按钮和输入框，但是我想指定整个范围选择区域的背景色。这是我正在谈论的区域的图像（红色轮廓）

此外，这里还有一个特定图表的示例

据我所知，没有任何选项允许我直接选择该部分

---

我也尝试过制作一个div并将其绝对定位在范围选择器上，然后使用Highcharts

zIndex

属性提升范围选择器内的元素，但这似乎不起作用。

找到了一个很好的解决方法，以防任何人也遇到此问题。将图表的整体背景色设置为三个停止点的线性渐变（前两个是初始颜色）。下面是一个示例，其中顶部栏的高度必须为54px

backgroundColor: {
  linearGradient: [0, 0, 0, 54, 0, 54],
  stops: [
    [0, '#707070'],
    [1, '#707070'],
    [2, '#e2e2e2']
  ]
},

---

您可以使用

Highcharts.svgrender

类渲染rect元素，该元素将作为

范围选择器的背景：

chart: {
    events: {
        load: function() {
            var rangSel = this.rangeSelector.group.getBBox();

            this.renderer.rect(
                rangSel.x,
                rangSel.y,
                rangSel.width,
                rangSel.height
            ).attr({
                fill: 'red'
            }).add();
        }
    }
}

现场演示：

API参考：