charts - 向 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，可以替换为for(var i = 0; i < colors.length; i++) { ... }.

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]] 
    ]
}