Angular-chart.js条形图，颜色100%不透明度

angular-chart.js bar chart with 100% opacity color

本文关键字：100% 不透明度 颜色 js 条形图 Angular-chart      更新时间：2023-09-26

2017年6月2日更新:我们修复了问题，但不是从这里的答案。如果我找到了，我会试着把解加进去。我们还切换到使用d3的angular-nvd3。

EDIT 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 -->

我很想使用这种实现，但我发现大多数问题都是使用不同的实现。

如果你想使用不透明度，你需要声明全彩色对象。可以使用十六进制或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

Angular-chartJS使用ChartJS选项配置中的chart-options。在选项中设置backgroundColor

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

尝试像这样添加颜色，应该可以工作:

rgba(170, 25, 33, 1)
相关文章：