热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

angular-chart.js条形图,100%不透明度颜色-angular-chart.jsbarchartwith100%opacitycolor

UPDATE02-JUNE-2017:Wefixedtheproblembutnotfromtheanswershere.Iwilltrytoaddthesolut

UPDATE 02-JUNE-2017: We fixed the problem but not from the answers here. I will try to add the solution we have if I found it. We also switched to angular-nvd3 which uses d3.

更新时间2017年6月2日:我们解决了问题,但没有解决这里的答案。如果我发现它,我会尝试添加我们的解决方案。我们还切换到使用d3的angular-nvd3。

EDIT 1: Added backgroundColor in options, still doesnt work. Not sure if I put it in the correct place.

编辑1:在选项中添加了backgroundColor,仍然无法正常工作。不确定我是否把它放在正确的位置。

Using the sample here. How to make the color fill 100%?

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


    

I really want to use this kind of implementation but most problems I find are using a different implementation.

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

3 个解决方案

#1


3  

You need to declare the full color object if you want to play with opacity. You can use hex or rgba

如果要使用不透明度,则需要声明全色对象。您可以使用hex或rgba

html:


js:

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

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

#2


0  

Angular-chartJS uses chart-options from ChartJS Option Configuration. Set backgroundColor within options.

Angular-chartJS使用ChartJS Option Configuration中的图表选项。在选项中设置backgroundColor。

Source: https://github.com/jtblin/angular-chart.js

#3


0  

Try adding colors like this it should work:

尝试添加这样的颜色它应该工作:

rgba(170, 25, 33, 1)

推荐阅读
author-avatar
欢欢浮夸_704
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有