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

将渐变饼图功能添加到Highcharts-ng

1 个答案: