带有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条形图

回答

相关问题