将梯度饼图功能添加到Highcharts-ng

Question

我在一个应用程序中使用Highcharts-ng。一切都很正常。我已经成功地在javascript文件中添加了一个额外的"drilldown“属性--太棒了！但是如何添加饼图渐变填充的代码呢？

$scope.chartConfig.options.colors = ["#55BF3B", "#DF5353", "#DDDF0D", "#7798BF"];

Highcharts.map($scope.chartConfig.options.colors, function (color) {
    return {
        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
        stops: [
            [0, color],
            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
        ]
    };
});

我的困难在于它使用了"Highcharts.map“和"Highcharts.Color"？

Answer 1

Highcharts.map只不过是可以被for(var i = 0; i < colors.length; i++) { ... }取代的简单for。

Highcharts.Color创建颜色对象。您不需要使用它，只需为颜色创建两个数组，一个用于开始颜色，一个用于结束颜色：

var startColors = ["#55BF3B", "#DF5353", "#DDDF0D", "#7798BF"];
var endColors = ["#7798BF", "#DDDF0D", "#DF5353", '#55BF3B' ];

然后循环遍历它们以设置颜色：

$scope.chartConfig.options.colors[0] = {
    radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
    stops: [
        [0, startColors[0]],
        [1, endColors[0]] 
    ]
}