如何为系列添加highcharts-ng饼图自定义颜色?

时间:2021-11-27 20:38:26

here is my chart object.

这是我的图表对象。

$scope.chartConfig = {
                        options: {
                            chart: {
                                type: 'pie',
                                plotBackgroundColor: null,
                                plotBorderWidth: null,
                                plotShadow: false

                            },
                            title: {
                                text: 'Status Counts in the Current Stage.'
                            },
                            plotOptions: {
                                pie: {
                                    dataLabels: {
                                        enabled: false
                                    },
                                    showInLegend: true
                                }
                            }
                        },
                        series: [{       
                            data: [
                                ['foo', 10],
                                ['bar', 90],
                                ['baz', 100]
                            ]
                        }],

                        loading: true
            };

in here i need to separate user defined colors for foo,bar,baz. how it is possible to do that in highchart-ng in angular.

在这里,我需要为foo,bar,baz分离用户定义的颜色。怎么可能用高角的角表示呢。

1 个解决方案

#1


3  

If you want a custom color for each user, you can modify your code like this:

如果您想为每个用户定制一种颜色,您可以这样修改您的代码:

$scope.chartConfig = {
                   options: {
                        chart: {
                            type: 'pie',
                            plotBackgroundColor: null,
                            plotBorderWidth: null,
                            plotShadow: false

                        },
                        title: {
                            text: 'Status Counts in the Current Stage.'
                        },
                        plotOptions: {
                            pie: {
                                dataLabels: {
                                    enabled: false
                                },
                                showInLegend: true
                            }
                        }
                    },
                    series: [{       
                       data: [{
                                name: 'foo',
                                y: 56.33,
                                color: '#E94B3B'
                               }, {
                                name: 'bar',
                                y: 24.03,
                                color: '#8AD5E7',
                                sliced: true,
                                selected: true
                               }, {
                                name: 'baz',
                                color: '#F8C471',
                                y: 10.38
                            }]
                    }],

                    loading: true
        };

an example here:

一个例子:

http://jsfiddle.net/69kmnxgj/2/

http://jsfiddle.net/69kmnxgj/2/

#1


3  

If you want a custom color for each user, you can modify your code like this:

如果您想为每个用户定制一种颜色,您可以这样修改您的代码:

$scope.chartConfig = {
                   options: {
                        chart: {
                            type: 'pie',
                            plotBackgroundColor: null,
                            plotBorderWidth: null,
                            plotShadow: false

                        },
                        title: {
                            text: 'Status Counts in the Current Stage.'
                        },
                        plotOptions: {
                            pie: {
                                dataLabels: {
                                    enabled: false
                                },
                                showInLegend: true
                            }
                        }
                    },
                    series: [{       
                       data: [{
                                name: 'foo',
                                y: 56.33,
                                color: '#E94B3B'
                               }, {
                                name: 'bar',
                                y: 24.03,
                                color: '#8AD5E7',
                                sliced: true,
                                selected: true
                               }, {
                                name: 'baz',
                                color: '#F8C471',
                                y: 10.38
                            }]
                    }],

                    loading: true
        };

an example here:

一个例子:

http://jsfiddle.net/69kmnxgj/2/

http://jsfiddle.net/69kmnxgj/2/