ハイチャートスライスカラーが更新されないAngular 2

Question

ハイチャート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

私は私の答えを得た。深い調査とGoogleの検索後、私はこの問題の原因がangular-cli.jsonの内側に配置された高チャートのCSSであることを発見しました。それは私が色のために置いていたCSSプロパティをオーバーライドし、デフォルトプロパティでオーバーライドしていました。私はhighchart.cssファイルを指しているCSSのプロパティを削除し、私のチャートは今私が渡している色でレンダリングされています。