Chart.js Ionic 2 Angular2：條形圖的背景顏色不變

Question

我使用Chart.js爲使用Ionic2和Angular2的混合應用程序創建堆疊條形圖。我無法獲取圖形中背景顏色或填充條的顏色以更改。我已經使用了在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領域。

，我已經從文檔中嘗試過其他CONFIGS是：

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>