Highcharts饼图图例项显示渐变颜色

我已经用渐变色创建了high chart的饼图，问题是饼图的图例项以渐变色显示。我希望图例项目的颜色没有梯度。进行此操作时，饼图的梯度应保持不变。请提供任何建议

这是我的密码：

/* Donut Chart */
    $(function () {
        colorsArray =['#AAE1FE', '#57C1FD', '#018BFD', '#0258E0','#002E77'];

        $('#pieChart').highcharts({
            credits: {
                enabled: false
            },
            chart: {
                type: 'pie',
                options: {
                    enabled: true,
                    alpha: 45
                },
                plotShadow: false 
            },
        colors:$.map(colorsArray,function (color) {
            return {
                radialGradient: { cx: 0.5, cy: 0.5, r: 0.5 },
                stops: [
                    [0, Highcharts.Color(color).brighten(-0.5).get('rgb')],
                    [0.5, Highcharts.Color(color).brighten(-0.3).get('rgb')],
                    [0.75, Highcharts.Color(color).brighten(-0.1).get('rgb')],
                    [1,Highcharts.Color(color).brighten(-0.5).get('rgb')]// darken
                ]
            };
        }),
         tooltip: {
             useHTML: true,
                     formatter: function() {
                        return this.point.name +'<br>' +'<b>'+ 'Share: ' + this.y +'%';
                    }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: false,
                    innerSize: '60%',
                    depth: 20,
                    size: '100%',
                    showInLegend: true ,
                    dataLabels: {
                        enabled: false
                    },
                    point: {
                        events: {
                            legendItemClick: function () {
                                return false; 
                            }
                        }
                    },
                    borderColor:'white',
                    borderWidth: '2px',
                    animation:false,
                    startAngle: 90,
                }
            },
        series: [{
            data: datapie,
            states: {
                hover: {
                    enabled: false
                }
            }
        }],
         legend: {
                layout: 'vertical',
                backgroundColor: 'white',
                align: 'right',
                verticalAlign: 'middle',
                x:-100,
                borderWidth: 1,
                borderRadius: 10,
                borderColor: '#eee',
                zIndex: 20,
                itemMarginTop: 5,
                itemMarginBottom: 5,
                labelFormatter: function () {
                    return this.name + ': ' + this.y + '%';
                }
            }
     });
     });

/*油炸圈饼图*/
$（函数（）{
颜色数组=[“#AAE1FE”、“#57C1FD”、“#018BFD”、“#0258E0”、“#002E77”]；
$（“#pieChart”）。高图({
学分：{
已启用：false
},
图表：{
键入“pie”，
选项：{
启用：对，
阿尔法：45
},
plotShadow:false
},
颜色：$.map（颜色数组，函数（颜色）{
返回{
径向梯度：{cx:0.5，cy:0.5，r:0.5}，
停止：[
[0，Highcharts.Color（Color）.Brighlight（-0.5）.get（'rgb'）]，
[0.5，Highcharts.Color（Color）.Brighlight（-0.3）.get（'rgb'）]，
[0.75，Highcharts.Color（Color）.Brighlight（-0.1）.get（'rgb'）]，
[1，Highcharts.Color（Color）.变亮（-0.5）.获取（'rgb'）]//变暗
]
};
}),
工具提示：{
是的，
格式化程序：函数（）{
返回this.point.name+'
'+'+'+'共享：'+this.y+'%；
}
},
打印选项：{
馅饼：{
allowPointSelect:false，
内部尺寸：“60%”，
深度：20，
大小：“100%”，
showInLegend：是的，
数据标签：{
已启用：false
},
要点：{
活动：{
legendItemClick:函数（）{
返回false；
}
}
},
边框颜色：'白色'，
边框宽度：“2px”，
动画：错，
startAngle:90，
}
},
系列：[{
数据：datapie，
国家：{
悬停：{
已启用：false
}
}
}],
图例：{
布局：“垂直”，
背景颜色：“白色”，
对齐：“右”，
垂直排列：'中间'，
x:-100，
边框宽度：1，
边界半径：10，
边框颜色：“#eee”，
zIndex:20，
项目编号：5，
项目MarginBottom:5，
labelFormatter:函数（）{
返回this.name+'：'+this.y+'%'；
}
}
});
});

您可以使用drawLegendSymbol，然后在渲染器中操纵颜色

var colorsArray = ['#AAE1FE', '#57C1FD', '#018BFD', '#0258E0', '#002E77'],
    i = 0;

(function (HC) {
    HC.wrap(Highcharts.seriesTypes.pie.prototype, 'drawLegendSymbol', function (fn, legend, item) {

        var symbolHeight = legend.options.symbolHeight || legend.fontMetrics.f;

        this.chart.renderer.rect(
        0,
        legend.baseline - symbolHeight + 1, // #3988
        legend.symbolWidth,
        symbolHeight,
        legend.options.symbolRadius || 0).attr({
            zIndex: 3,
            fill: colorsArray[i]
        }).add(item.legendGroup);

        i++;

    });
})(Highcharts)

---

示例：

@Nirmala如果答案解决了您的问题，您可以对其进行投票和/或将其标记为答案吗？