在Highstock / Highcharts

Question

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

此外，这是该特定图表的JSFiddle。

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

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

Answer 1

您可以使用Highcharts.SVGRenderer类来渲染rect元素，该元素将作为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

Answer 2

找到了一个很好的解决方法，以防任何人也遇到此问题。将图表的总体backgroundColor设置为具有三个刻度的线性渐变（前两个是您的初始颜色）。这是一个示例，其中顶部栏的高度必须为54px。

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