帶有100％不透明顏色的angular-chart.js條形圖

UPDATE 02-JUNE-2017：我們解決了這個問題，但不是從這裏的答案中解決。如果我找到它，我會嘗試添加我們的解決方案。我們也切換到angular-nvd3，它使用d3。帶有100％不透明顏色的angular-chart.js條形圖

編輯1：在選項中增加了backgroundColor，仍然不起作用。不知道我是否把它放在正確的地方。

使用樣本here。如何使顏色填充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 -->

我真的想用這種實現的，但大多數問題我發現使用的是不同的實現。

來源

2016-08-11 iamdevlinph

Angular-chartJS使用chart-options從ChartJS Option Configuration。在選項中設置backgroundColor。

來源：https://github.com/jtblin/angular-chart.js

來源

2016-08-11 10:09:48

所以我選擇看現在這個樣子：'$ scope.options = {秤： {xAxes：[{stacked：！0}]，yAxes：[{stacked：！0}]}，title：{display：！0，text：「My First Bar Chart」}，backgroundColor：[「rgba（170， 25,33,1）「，」rgba（170,25,33,1）「]};'但是仍然沒有100％填滿。 – iamdevlinph

嘗試增加顏色這樣它應該工作：

rgba(170, 25, 33, 1)

來源

2016-08-11 10:11:47 user3743266

所以我現在的選擇是這樣的：'$ scope.options = {scales：{xAxes：[{stacked：！0}]，yAxes：[{stacked：！0}]}，title：{display：！0，文本：「我的第一個條形圖」}，backgroundColor：[「rgba（170,25,33,1）」，「rgba（170,25,33,1）」]};'但是仍然沒有100％填充。 – iamdevlinph

你需要，如果你想和透明度發揮聲明全色對象。您可以使用十六進制或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' 
    } 
];

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

來源

2016-10-20 03:18:37

該解決方案幫助我解決了類似的問題。 – Nemesis

帶有100％不透明顏色的angular-chart.js條形圖

回答

相關問題