Chart.js Ionic 2 Angular2：棒グラフの背景色が変更されない

Question

Ionic2とAngular2を使用するハイブリッドアプリのためにChart.jsを使って積み上げ棒グラフを作成しています。変更するグラフの背景色や棒の色を取得できません。 chart.js documentationにあるすべての設定/例を使用しましたが、デフォルトの赤と青のデフォルト（？）の色が常に表示されます。

barChartOptions:any = { 
    responsive: true, 
    scales: { 
     xAxes: [{ 
     categoryPercentage: 0.6, 
     barPercentage: 1.0, 
     stacked: true, 
     ticks: { 
      beginAtZero: true 
     }, 
     gridLines: { 
      color: "rgba(255,255,255,1.0)", 
      zeroLineColor: "rgba(254,254,254, 1.0)" 
     } 
     }], 
     yAxes: [{ 
     display: false, 
     ticks: { 
      beginAtZero: true 
     } 
     }] 
    }, 
    legend: { 
     display: false, 
    } 
}; 
barChartLabels:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; 
barChartType:string = 'bar'; 
barChartLegend:boolean = false;; 

barChartData:any[] = [ 

    { 
     fillColor:'rgba(255, 99, 132, 0.2)', 
     borderColor: "rgba(10,150,132,1)", 
     borderWidth: 5, 
     data: [65, 59, 80, 81, 56, 55, 40], 
    }, 
    { 
     backgroundColor: '#61ae37', 
     data : [190,150,125,185,150,135,175] 
    } 
]; 

問題がfillColorまたはbarChartDataオブジェクトでbackgroundColorフィールドである：ここでは

は私が持っているものです。私はドキュメントから試してみた

他のコンフィグは以下のとおりです。

data: [12, 19, 3, 5, 2, 3], 
backgroundColor: [ 
    'rgba(255, 99, 132, 0.2)', 
    'rgba(54, 162, 235, 0.2)', 
    'rgba(255, 206, 86, 0.2)', 
    'rgba(75, 192, 192, 0.2)', 
    'rgba(153, 102, 255, 0.2)', 
    'rgba(255, 159, 64, 0.2)' 
], 
borderColor: [ 
    'rgba(255,99,132,1)', 
    'rgba(54, 162, 235, 1)', 
    'rgba(255, 206, 86, 1)', 
    'rgba(75, 192, 192, 1)', 
    'rgba(153, 102, 255, 1)', 
    'rgba(255, 159, 64, 1)' 
], 
borderWidth: 1 

私も、私は境界線の幅を変更するために得ることができるにもかかわらず、変更する境界線の色を取得することはできません。

また、矩形の設定で変更しようとしました。利回りはありません。私の最高の推測では、私の設定よりも優先さを取っているいくつかのデフォルトの設定があることがある

var data = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [ 
     { 
      label: "My First dataset", 
      backgroundColor: "rgba(255,99,132,0.2)", 
      borderColor: "rgba(255,99,132,1)", 
      borderWidth: 1, 
      hoverBackgroundColor: "rgba(255,99,132,0.4)", 
      hoverBorderColor: "rgba(255,99,132,1)", 
      data: [65, 59, 80, 81, 56, 55, 40], 
     } 
    ] 
}; 

：

私はコピー元のコードは、このでした。どんな助けでも大歓迎です。

Answer 1

私は問題を把握しました。私はng2-chartsを使用しており、その構成は微妙に異なります。彼らは、色を追加するhtmlマークアップの[colors]フィールドを使用します。したがって、あなたのチャートオプションオブジェクトの外側の色の.tsファイルに追加オブジェクトを作成します。

barChartColors: any [] =[ 
    { 
     backgroundColor:'rgba(255, 99, 132, 1)', 
     borderColor: "rgba(10,150,132,1)", 
     borderWidth: 5 
    }, 
    { 
     backgroundColor:'rgb(97 174 55, 1)', 
     borderColor: "rgba(10,150,132,1)", 
     borderWidth: 5, 
    } 
] 

そして、それはこのようになりますマークアップ：

<base-chart class="chart" 
      [datasets]="barChartData" 
      [labels]="barChartLabels" 
      [options]="barChartOptions" 
      [colors]="barChartColors" <-----this is the kicker 
      [legend]="barChartLegend" 
      [chartType]="barChartType" 
      [responsive]='false' 
      (chartHover)="chartHovered($event)" 
      (chartClick)="chartClicked($event)"> 

      </base-chart>