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

我使用Chart.js为使用Ionic2和Angular2的混合应用程序创建堆叠条形图。我无法获取图形中背景颜色或填充条的颜色以更改。我已经使用了在chart.js documentation上给出的每个配置/示例，并且我总是获取默认的红色和蓝色默认（？）颜色。Chart.js Ionic 2 Angular2：条形图的背景颜色不变

以下是我有：

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

我最好的猜测是，有是优先于我的配置一些默认配置。任何帮助将不胜感激。

来源

2016-06-16 discodane

我想出了这个问题。我正在使用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>

来源

2016-06-17 15:40:31 discodane

这适用于条形图。你知道如何改变甜甜圈图的颜色吗？ – Venkat

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

回答

相关问题