更改饼图高图角度中的默认颜色

时间:2017-05-05 12:21:50

标签: javascript angularjs charts highcharts

我想更改Highchart饼图的默认颜色。图表将动态生成,我不知道饼图中有多少个切片。因此,我想使用一个名为$ scope.ColorArr的颜色数组,并更改Highchart饼图的默认颜色。我怎样才能做到这一点?预先感谢您的任何帮助。下面是我生成饼图的代码:

dataService.getAll('InternationalReportTest', 'GetAll', {}, function (res) {
        $scope.NeoRespSuppLastYearMode = res.data;       
        $scope.AuxArray = [];
        $scope.MainArray = [];
        $scope.ColorArr = ['#34CBD3', '#D334CE', '#E94B3B', '#8AD5E7', '#F8C471', '#34D376'];
        var log = [];
        var i = 0;
        angular.forEach($scope.NeoRespSuppLastYearMode, function (oneCase) {           
            $scope.AuxArray.push(oneCase.Mode, oneCase.TotRuns, $scope.ColorArr[i])
            $scope.MainArray.push($scope.AuxArray);
            $scope.AuxArray = [];
            i = i + 1;
        }, log);

    });
    $scope.createChart = function () {

        Highcharts.chart('container', {

            options: {
                chart: {
                    type: 'pie',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false

                },

                title: {
                    text: 'Neonatal Respiratory Support Last Year Mode.'
                },
                plotOptions: {
                    pie: {
                        dataLabels: {
                            enabled: true
                        },
                        showInLegend: true
                    }
                }
            },

            series: [{
                type: 'pie',
                name: 'Modes',               
                data: $scope.MainArray,
                color: $scope.ColorArr
            }],

            loading: true
        })};

1 个答案:

答案 0 :(得分:0)

全文写下。您正试图设置一个单独的系列'颜色为一系列颜色。这不行。您需要做的是设置highcharts选项colors数组。 所以你会有这样的事情:

$scope.createChart = function () {

    Highcharts.chart('container', {
        colors: $scope.ColorArr,
        options: {
            chart: {
                type: 'pie',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false

            },

            title: {
                text: 'Neonatal Respiratory Support Last Year Mode.'
            },
            plotOptions: {
                pie: {
                    dataLabels: {
                        enabled: true
                    },
                    showInLegend: true
                }
            }
        },

        series: [{
            type: 'pie',
            name: 'Modes',               
            data: $scope.MainArray
        }],

        loading: true
    })};