Chart.js Ionic 2 Angular2: Background color of bar graph not changing

问题

I'm using Chart.js to create a stacked bar graph for a hybrid app using Ionic2 and Angular2. I cannot get the background color or fill color of the bars in the graph to change. I've used every configuration/example that is given on chart.js documentation, and I always get the default red and blue default(?) colors.

Here is what I have:

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

The issue is the fillColor or the backgroundColor fields in the barChartData object.

Other configs that I've tried from the documentation are:

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

I also can't get the border color to change EVEN THOUGH I can get the border width to change.

I've also tried changing it with the rectangle configuration. No yield.

The original code I copied was this:

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

My best guess is that there is some default configuration that is taking precedence over my configuration. Any help would be greatly appreciated.

回答1:

I figured out the issue. I am using ng2-charts and their configuration is just subtly different. They use a [colors] field in the html markup where you add the colors in. So, what you do is create an additional object in your .ts file for your colors OUTSIDE of your chart options object.

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

And in the markup it looks like this:

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

来源：https://stackoverflow.com/questions/37870329/chart-js-ionic-2-angular2-background-color-of-bar-graph-not-changing

标签

typescript

angular

chart.js

ionic2