在高图表区域的一半上设置背景颜色

Question

这是我的小提琴：http://jsfiddle.net/highcharts/4rTBY/

chart: {
    renderTo: 'container',
    backgroundColor: {
        linearGradient: { x1: 0, y1: 0,  x2: 0, y2: 0 },
        stops: [
            [0, 'rgb(255, 255, 255)'],
            [0.5, 'rgb(200, 200, 255)']
        ]
    },
    type: 'line'
}

当我们使用backgroundColor整个背景都会变色。我只希望图表的 50% 的背景从底部着色。

提前致谢

Answer 1

我指定了三个点，这三个点都在屏幕中间（x: 0.5）。三个点的原因是页面的其余部分继续绘制最近点的颜色，如果分配两个点，它将是渐变的。我将前两个点放在彼此附近，这样渐变效果就不会显示：

linearGradient: { x1: 0.5, y1: 0.5, x2: 0.5, y2: 0.51, x3: 0.5, y3: 1 },
stops: [[0, 'rgb(255, 255, 255)'],
        [1, 'rgb(200, 200, 255)'],
        [2, 'rgb(200, 200, 255)']]

这是小提琴：http://jsfiddle.net/4rTBY/625/