javascript - 在 Highstock/Highcharts 中设置 rangeSelector 容器的背景颜色

Question

我有一个 Highcharts 图表，我需要修改 rangeSelector 部分。我已经能够设置一些按钮和输入框的格式，但我想指定整个范围选择区域的背景颜色。这是我正在谈论的区域的图像(红色轮廓)。

此外，这里有一个 JSFiddle对于该特定图表。

据我所知，没有任何选项可以让我直接选择该部分 listed in the documentation 。

我还尝试制作一个 div 并将其绝对定位在范围选择器上，然后使用 Highcharts zIndex 属性提升范围选择器内的元素，但这似乎不起作用.

Answer 1

您可以使用 Highcharts.SVGRenderer 类来渲染矩形元素，该元素将作为 rangeSelector 的背景:

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();
        }
    }
}

现场演示:http://jsfiddle.net/BlackLabel/kpbxya8s/

API引用:https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect