Highchart Slice颜色不更新Angular 2

Question

我已使用 highchart api 构建饼图，我正在尝试更改图表的颜色。

我的代码如下：

import { Component, OnInit } from '@angular/core';
const Highcharts = require('highcharts');

@Component({
    selector: 'pie-chart',
    templateUrl: './pie-chart.component.html',
    styleUrls: ['./pie-chart.component.scss']
})
export class PieChartComponent implements OnInit {



    highchartsConfiguration: any = {
        chart: {
            type: 'pie',
            plotBackgroundColor: null,
            plotBorderWidth: 0,
            plotShadow: false,
            margin: [0, 0, 0, 0],
            spacingTop: 0,
            spacingBottom: 0,
            spacingLeft: 0,
            spacingRight: 0,
            events: {
                load: function (e) {

                    //document.getElementById("chart-text").remove();
                    let chart = this,

                        rend = chart.renderer,
                        pie = chart.series[0],
                        left = chart.plotLeft + pie.center[0],
                        top = chart.plotTop + pie.center[1];
                    if (this.rendTxt === undefined) {
                        this.rendTxt = rend.text('6.5h Avg', left, top).attr({
                            'text-anchor': 'middle', 'id': 'chart-text',
                            'font-size': '14px', 'font-weight': 'bold',
                        }).add();
                    } else {
                        this.rendTxt.attr({ text: '6.5h Avg' });
                        this.rendTxt.attr({ x: left });
                        this.rendTxt.attr({ y: top });
                    }

                },
                redraw: function (e) {

                    //document.getElementById("chart-text").remove();
                    let chart = this,

                        rend = chart.renderer,
                        pie = chart.series[0],
                        left = chart.plotLeft + pie.center[0],
                        top = chart.plotTop + pie.center[1];
                    if (this.rendTxt === undefined) {
                        this.rendTxt = rend.text('6.5h Avg', left, top).attr({
                            'text-anchor': 'middle', 'id': 'chart-text',
                            'font-size': '14px', 'font-weight': 'bold',
                        }).add();
                    } else {
                        this.rendTxt.attr({ text: '6.5h Avg' });
                        this.rendTxt.attr({ x: left });
                        this.rendTxt.attr({ y: top });
                    }

                }
            }
        },
        title: {
            text: 'Browser market shares at a specific website, 2014'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                size: 235,
                dataLabels: {
                    enabled: false,
                    style: {
                        fontWeight: 'bold',
                        color: 'white'
                    }
                },
                center: ['30%', '30%'],
                showInLegend: true,
            }
        },
        legend: {
            align: 'center',
            layout: 'vertical',
            verticalAlign: 'top',
            symbolRadius: 0,
            symbolHeight: 20,
            symbolWidth: 20,
            itemMarginTop: 25,
            itemMarginBottom: 2,
            y: 20,
            x: 100

        },
        series: [],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    plotOptions: {
                        pie: {
                            size: 120,
                            center: ['50%'],
                        }
                    },
                    legend: {
                        align: 'center',
                        verticalAlign: 'bottom',
                        layout: 'horizontal',
                        symbolHeight: 20,
                        symbolWidth: 20,
                        itemMarginTop: 10,
                        itemMarginBottom: 5,
                        y: 0,
                        x: 0,

                    },
                    credits: {
                        enabled: false
                    }
                }
            }]
        }

    };



    constructor() { }



    series = [];

    ngOnInit() {

        Highcharts.setOptions({
            colors: ['black', 'black', 'black', 'black']
        });



        this.series = this.series = [{
            // colors: [
            //     'blue',
            //     'black',
            //     'yellow',
            //     'green'
            // ],
            innerSize: '70%',
            data: [{
                name: '0 - 4 hours',
                y: 56.33
            }, {
                name: '4 - 8 hours',
                y: 24.03
            }, {
                name: '8+ hours',
                y: 10.38
            }, {
                name: 'Abnormalities',
                y: 4.77
            }]
        }]

    }

}

我已尝试根据网络上提供的解决方案更改颜色，但是，没有一个解决方案对我有用，我的图例颜色正在更改，但饼图切片颜色仍然是默认颜色。

图例颜色正在发生变化，但切片颜色仍然相同

请告诉我我做错了什么。

Answer 1

我得到了答案。经过深入调查和谷歌搜索，我发现这个问题的原因是放置在 angular-cli.json 中的高图表的 css。它覆盖了我为颜色设置的 css 属性，并用它的默认属性覆盖了它。我删除了指向 highchart.css 文件的 css 属性，现在我的图表用我传递的颜色呈现。