Jquery 如何在highcharts中实现条形图的线性梯度

我已经用highcharts创建了一个条形图，对于条形图填充颜色，需要提供lienar渐变。不知道如何设置线性渐变。如果有人有主意，你能帮我吗

我所期望的是：

我所尝试的：

 $(function () {
    $('#ao-mix-allocation').highcharts({
        chart: {
            type: 'column',
            spacingBottom: 0,
            spacingTop: 0,
            spacingLeft: 0,
            spacingRight: 0,
            events: {
                load: function () {
                    this.xAxis[0].setExtremes(0, 5);
                }
            }
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        exporting: {
            enabled: false
        },
        credits: {
            enabled: false
        },

        legend: {
            enabled: false
        },
        xAxis: {
            min:0,
            categories: [
                'S1',
                'S2',
                'S3',
                'S4',
                'S5',
                'S6',
                'S7',
                'S8',
                'S9',
                'S10',
                'S11',
                'S12',

            ],
            crosshair: false,
            gridLineWidth: 0,
            tickWidth: 0
        },
        yAxis: {
            min: 0,
            max: 150,
            title: {
                text: ''
            },
            labels: {
                enabled: false
            },
            gridLineWidth: 0,
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true,
            enabled: false
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0,
                width: 11,
                //stacking: 'normal',
                //grouping: true
                color: {
                    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
                    stops: [
                        [0, '#0058a5'],
                        [1, '#3f85c8']
                    ]
                }

            },

        },
        series: AoMixAllocationData()
    });

$（函数（）{
$（“#ao混合分配”）。高图({
图表：{
键入：“列”，
间距底部：0，
间距：0，
间距：0，
间距：0，
活动：{
加载：函数（）{
this.xAxis[0].setextrems（0,5）；
}
}
},
标题：{
文本：“”
},
副标题:{
文本：“”
},
出口：{
已启用：false
},
学分：{
已启用：false
},
图例：{
已启用：false
},
xAxis：{
分:0,，
类别：[
"S1",，
“S2”，
“S3”，
“S4”，
“S5”，
‘中六’，
‘S7’，
"S8",，
"S9",，
‘S10’，
"S11",，
“S12”，
],
十字线：错，
网格线宽：0，
宽度：0
},
亚克斯：{
分:0,，
最高：150，
标题：{
文本：“”
},
标签：{
已启用：false
},
网格线宽：0，
},
工具提示：{
headerFormat:“{point.key}”，
pointFormat:“{series.name}:”+
“{point.y:.1f}mm”，
页脚格式：“”，
分享：是的，
是的，
已启用：false
},
打印选项：{
专栏：{
点填充：0.2，
边框宽度：0，
宽度：11，
//堆叠：“正常”，
//分组：正确
颜色：{
线性半径：{x1:0，x2:0，y1:0，y2:1}，
停止：[
[0，#0058a5']，
[1'#3f85c8']
]
}
},
},
系列：AoMixAllocationData（）
});

JSFIDLE是

---

提前感谢！！

你就快到了。试着玩一下

线性半径。

这是我编辑的，它在一个条中从上到下显示了两种不同的颜色。请参考这篇文章，了解它的详细工作原理。

当然！！如果可以的话，请帮助我解决我的其他问题。@IamSarav我也回答了这个问题。请看一看好啊