2017 年 6 月 2 日更新:我们解决了问题,但不是根据此处的答案。如果我找到了,我会尝试添加我们现有的解决方案。我们还切换到使用 d3
的 angular-nvd3
。
编辑 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 -->
我真的很想使用这种实现方式,但我发现大多数问题都在使用不同的实现方式。
最佳答案
如果你想玩不透明,你需要声明全色对象。你可以使用 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'
}
];
关于javascript - 具有 100% 不透明度颜色的 angular-chart.js 条形图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38890757/