32

プロジェクトに ng2-charts を追加し、ドーナツと棒グラフの 2 つのグラフを表示します。追加したので、両方とも灰色で表示されます

    <base-chart class="chart"
                [colors]="chartColors"
                ...
    </base-chart>

へcomponent.template.html、そして

public chartColors:Array<any> =[
    {
      fillColor:'rgba(225,10,24,0.2)',
      strokeColor:'rgba(11,255,20,1)',
      pointColor:'rgba(111,200,200,1)',
      pointStrokeColor:'#fff',
      pointHighlightFill:'#fff',
      pointHighlightStroke:'rgba(200,100,10,0.8)'
    }, ... (3x)

にcomponent.ts。

色を変更するために他のパッケージのインポートが必要ですか、それとも設定が間違っていますか?

Chromes html インスペクターは、レンダリングされた次の html 出力を示します。

ng-reflect-colors="[object Object],[object Object],[object Object]"
4

5 に答える 5

49

これは次のように行う必要があります。

  public chartColors: Array<any> = [
    { // first color
      backgroundColor: 'rgba(225,10,24,0.2)',
      borderColor: 'rgba(225,10,24,0.2)',
      pointBackgroundColor: 'rgba(225,10,24,0.2)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(225,10,24,0.2)'
    },
    { // second color
      backgroundColor: 'rgba(225,10,24,0.2)',
      borderColor: 'rgba(225,10,24,0.2)',
      pointBackgroundColor: 'rgba(225,10,24,0.2)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(225,10,24,0.2)'
    }];

デフォルトでは灰色が設定されています。これは、プロパティ名が間違っているため、色のオプションが機能しないことを意味します。

ここに、色のプロパティがどのように呼び出されるかの例があります。

ng2-charts-github-ソースコード

@アップデート：

backgroundColor だけを更新する必要がある場合は、以下のコードも機能します。

public chartColors: Array<any> = [
    { // all colors in order
      backgroundColor: ['#d13537', '#b000b5', '#c0ffee', ...]
    }
]
于 2016-10-03T13:40:50.173 に答える