Добавьте функцию Gradient Pie Chart в Highcharts-ng

Я использую Highcharts-ng в приложении. Все работает нормально. Я успешно добавил дополнительный атрибут «детализация» в файл javascript — отлично! Но как мне добавить код для градиентной заливки круговой диаграммы?

$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»?


gradient charts pie-chart highcharts highcharts-ng
person user1491655    schedule 25.03.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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]] 
    ]
}
person Paweł Fus    schedule 26.03.2014
comment
Спасибо, Павел, отлично получилось. Я знаю, что у меня есть прекрасные пироги с градиентом :-) - person user1491655; 07.04.2014