如何用Highcharts 10.2.1将子弹图背景改为渐变替代Plot Bands

问题场景 #

使用Highcharts 10.2.1自定义子弹图时，原本通过yAxis.plotBands设置了分段纯色背景，现在想要替换成从红色到绿色的垂直渐变背景，但修改yAxis.color添加渐变配置后完全没效果。

原分段plotBands代码：

yAxis: {
    plotBands: [{
        from: 0,
        to: 1,
        color: '#666'
    }, {
        from: 1,
        to: 2,
        color: '#999'
    }, {
        from: 2,
        to: 5,
        color: '#bbb'
    }],
    labels: {
        format: '{value}'
    },
    title: null
},

尝试的无效渐变配置：

yAxis: {
   color: {
            linearGradient: [0, 0, 0, 300],
            stops: [
                [0, 'rgb(255, 0, 0)'],
                [0.5, 'rgb(255, 255, 0)'],
                [1, 'rgb(0, 255, 0)']
            ]
        },

解决方法 #

核心原因 #

yAxis.color是用来设置坐标轴线条的颜色，和背景填充完全无关，所以之前的配置不会生效。要实现渐变背景，有两种靠谱方案：

方案1：单plotBand结合渐变（推荐）

直接创建一个覆盖整个y轴范围的plotBand，在里面配置渐变，还能根据原分段位置调整渐变过渡点：

yAxis: {
    plotBands: [{
        from: 0, // 对应原分段的最小值
        to: 5,   // 对应原分段的最大值
        color: {
            // 垂直渐变：[x起始, y起始, x结束, y结束]，这里是从上到下渐变
            linearGradient: [0, 0, 0, 300],
            stops: [
                [0, 'rgb(255, 0, 0)'],     // y=0处（顶部）为红色
                [0.2, 'rgb(255, 255, 0)'], // y=1处（原第一段结束）过渡为黄色
                [0.4, 'rgb(255, 255, 0)'], // y=2处（原第二段结束）保持黄色
                [1, 'rgb(0, 255, 0)']      // y=5处（底部）过渡为绿色
            ]
        }
    }],
    labels: {
        format: '{value}'
    },
    title: null
}

这里的stops位置是按相对比例计算的：1/5=0.2，2/5=0.4，这样渐变的过渡点刚好和原分段对齐，视觉上更接近原效果。

方案2：图表全局渐变背景

如果不需要严格限制在y轴范围内，也可以给整个图表设置渐变背景：

chart: {
    type: 'bullet',
    backgroundColor: {
        linearGradient: [0, 0, 0, 300],
        stops: [
            [0, 'rgb(255, 0, 0)'],
            [0.2, 'rgb(255, 255, 0)'],
            [1, 'rgb(0, 255, 0)']
        ]
    }
},
yAxis: {
    // 移除原plotBands，保留其他配置
    labels: {
        format: '{value}'
    },
    title: null,
    min: 0,
    max: 5
}

内容的提问来源于stack exchange，提问作者NiBE