biểu đồ thanh angular-chart.js với màu opacity 100%

Question

CẬP NHẬT 02-JUNE-2017: Chúng tôi đã khắc phục sự cố nhưng không phải từ câu trả lời ở đây. Tôi sẽ cố gắng thêm giải pháp chúng tôi có nếu tôi tìm thấy nó. Chúng tôi cũng đã chuyển sang angular-nvd3 sử dụng d3.

CHỈNH SỬA 1: Đã thêm backgroundColor trong tùy chọn, vẫn không hoạt động. Không chắc chắn nếu tôi đặt nó vào đúng chỗ.

Sử dụng mẫu here. Làm thế nào để làm cho màu sắc lấp đầy 100%?

JS:

$scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; 
$scope.type = 'StackedBar'; 
$scope.series = ['2015', '2016']; 
//$scope.colors = ['#AA1921', '#18AF5C']; 
$scope.options = { 
    scales: { 
     xAxes: [{ 
      stacked: true, 
     }], 
     yAxes: [{ 
      stacked: true 
     }] 
    }, 
    title: { 
     display: true, 
     text: 'My First Bar Chart' 
    }, 
    // added as suggested 
    backgroundColor: ['rgba(170, 25, 33, 1)', 'rgba(170, 25, 33, 1)'] 
}; 
$scope.data = [ 
    [65, 59, 90, 81, 56, 55, 40], 
    [28, 48, 40, 19, 96, 27, 100] 
]; 

HTML

<canvas class="chart chart-bar" 
    chart-data="data" 
    chart-labels="labels" 
    chart-options="options" 
    chart-series="series" 
    chart-colors="colors"></canvas> 
    <!-- chart-colors is removed when using the backgroundColor --> 

Tôi thực sự muốn sử dụng loại triển khai nhưng hầu hết các vấn đề tôi thấy đang sử dụng một thực hiện khác nhau.

Answer 1

Biểu đồ gócJS sử dụng chart-options từ ChartJS Option Configuration. Đặt backgroundColor trong các tùy chọn.

Nguồn: https://github.com/jtblin/angular-chart.js

Answer 2

Hãy thử thêm màu sắc như thế này nó sẽ làm việc:

rgba(170, 25, 33, 1) 

Answer 3

Bạn cần phải khai báo các đối tượng màu đầy đủ nếu bạn muốn chơi với opacity. Bạn có thể sử dụng hex hoặc rgba

html:

<canvas class="chart chart-bar" 
    chart-data="data" 
    chart-labels="labels" 
    chart-options="options" 
    chart-series="series" 
    chart-colors="colors"></canvas> 

js:

$scope.compareChart.colors = [ 
    { 
     backgroundColor: '#b3e7fb', 
     borderColor: '#b3e7fb', 
     hoverBackgroundColor: '#b3e7fb', 
     hoverBorderColor: '#b3e7fb' 
    } 
]; 

Xem https://github.com/jtblin/angular-chart.js/issues/131