web-dev-qa-db-ja.com

ng2-chartsの色を変更するにはどうすればよいですか？

プロジェクトに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

色を変更するために他のパッケージのインポートが必要ですか、またはセットアップが間違っていますか？ ChromeのHTMLインスペクターには、次のHTML出力が表示されます

ng-reflect-colors="[object Object],[object Object],[object Object]"
angularng2-charts
17
edamerau

次のようにする必要があります。

  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-source-code

@ UPDATE：

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

public chartColors: Array<any> = [
    { // all colors in order
      backgroundColor: ['#d13537', '#b0o0b5', '#coffee', ...]
    }
]
31
ulou

また、あなたはこの方法でそれを行うことができます：

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

そして

public chartColors: any[] = [
      { 
        backgroundColor:["#FF7360", "#6FC8CE", "#FAFFF2", "#FFFCC4", "#B9E8E0"] 
      }];
41
Jorge Casariego
//.ts_file     

    public chartColors() {
            return [{
              backgroundColor: this.alert.severityColor,
              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)'
          }]
        }


//.html_file

<div style="display: block">
          <canvas baseChart
                  [datasets]="barChartData()"
                  [options]="barChartOptions"
                  [legend]="barChartLegend"
                  [chartType]="barChartType"
                  [colors]="chartColors()"
                  (chartHover)="chartHovered($event)"
                  (chartClick)="chartClicked($event)"></canvas>
        </div>

アラートに添付されている値と色に基づいて、チャートの色を動的に変更する必要がありました。 @uluoの回答がすばらしいことがわかりました。クラスのプロパティから関数に変更し、アラートで動的要素に設定された色でオブジェクトを返しました。次に、関数を使用してチャートの色をバインドしましたが、それは魔法でした。私は数時間この問題に悩まされていました！

これがAngularでng2-chartsに動的な値を渡そうとしている人を助けることを願っています！

3
Chris Jannenga