angular-chart.js條形圖，100％不透明度顏色

Question

更新時間2017年6月2日 ：我們解決了問題，但沒有解決這里的答案。 如果我發現它，我會嘗試添加我們的解決方案。 我們還切換到使用d3 angular-nvd3 。

編輯1 ：在選項中添加了backgroundColor ，仍然無法正常工作。 不確定我是否把它放在正確的位置。

在這里使用示例。 如何使顏色填充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 -->

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

Answer 1

如果要使用不透明度，則需要聲明全色對象。 您可以使用hex或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

Answer 2

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

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

Answer 3

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

rgba(170, 25, 33, 1)