Chart.js离子2 Angular2:条形图的背景颜色不更改

Question

我正在使用Chart.js使用ionic2和angular2为混合应用程序创建堆叠的条形图。我无法获得图表中条形条的背景颜色或填充棒的颜色。我使用了Chart.js文档上给出的每个配置/示例，并且我总是获得默认的红色和蓝色默认（？）颜色。

这是我拥有的：

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]
    }
];  

问题是Barchartdata对象中的fillColor或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]字段，在其中添加颜色。

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>