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

问题是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]字段添加颜色。所以，您要做的是在.ts文件中为图表选项对象的颜色OUTSIDE创建一个额外的对象。

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>

Chart.js Ionic 2 Angular2：条形图的背景颜色不变

1 个答案: