Javascript 如何更改 Angular-Chart.js 的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28647492/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change colours for Angular-Chart.js
提问by Lucien Dubois
I use Angular-Chart.js (the AngularJS Chart.jsversion) to create a bar chart. The Chart is working with the options except for the colours.
我使用 Angular-Chart.js（AngularJS Chart.js版本）来创建条形图。图表正在处理除颜色之外的选项。
Even if I set them it is indicated in the documentation, they stay grey.
即使我设置了它们，文档中也有指示，它们仍然是灰色的。
<div class="graph-display" ng-controller="chartController">
<canvas class="chart chart-bar"
data="bilans.data"
labels="bilans.labels"
series="bilans.series"
options="{
scaleShowHorizontalLines: true,
scaleShowVerticalLines: false,
tooltipTemplate: '<%= value %> $',
responsive: true
}"
colours="{
fillColor: 'rgba(47, 132, 71, 0.8)',
strokeColor: 'rgba(47, 132, 71, 0.8)',
highlightFill: 'rgba(47, 132, 71, 0.8)',
highlightStroke: 'rgba(47, 132, 71, 0.8)'
}"
></canvas>
</div>
Actually, the options are working but the colours are not. Am I doing something wrong?
实际上，选项有效，但颜色无效。难道我做错了什么？
回答by Pankaj Parkar
Your should declare coloursobject as an array
您应该将colours对象声明为数组
"colours": [{
fillColor: 'rgba(47, 132, 71, 0.8)',
strokeColor: 'rgba(47, 132, 71, 0.8)',
highlightFill: 'rgba(47, 132, 71, 0.8)',
highlightStroke: 'rgba(47, 132, 71, 0.8)'
}];
For more info refer this post/ thistoo.
For newer versions, see eli0tt's answer, as the parameter names have changed.
对于较新的版本，请参阅eli0tt 的回答，因为参数名称已更改。
回答by Kate S
I was having the same difficulty. In the docs it says to use "colors" however once I updated my html to:
我遇到了同样的困难。在文档中，它说要使用“颜色”，但是一旦我将 html 更新为：
chart-colours
chart-colours
with an angular array of:
具有以下角度数组：
$scope.colours = ['#72C02C', '#3498DB', '#717984', '#F1C40F'];
$scope.colours = ['#72C02C', '#3498DB', '#717984', '#F1C40F'];
It worked!
有效！
回答by eli0tt
It seems that naming changed again. I'm using angular-chart.js 1.0.3and color management for bar charts works like this :
名字好像又变了。我正在使用angular-chart.js 1.0.3，条形图的颜色管理是这样工作的：
colors:[{
backgroundColor:"#F00",
hoverBackgroundColor:"#FF0",
borderColor:"#0F0",
hoverBorderColor:"#00F"
}];
In the canvas tag, the name of the attribute is chart-colors
在canvas标签中，属性的名字是chart-colors
回答by jtblin
As @pankajparkar said. Just adding that you can also pass html colours and angular-chart.js will define the colour objects properly in rgba with the proper nuances e.g. $scope.colors = ['#FD1F5E','#1EF9A1','#7FFD1F','#68F000'];
正如@pankajparkar 所说。只需补充一点，您还可以传递 html 颜色，angular-chart.js 将使用适当的细微差别在 rgba 中正确定义颜色对象，例如$scope.colors = ['#FD1F5E','#1EF9A1','#7FFD1F','#68F000'];
回答by Interlated
As at 2017 I got angular-charts to work with the following code.
截至 2017 年，我得到了 angular-charts 来处理以下代码。
that the names of the elements are changed. Taken from the angular-chart source code.
also that as soon as you run out of colours angular-chart will generate them for you. This includes an opacity of 0.2 for background colours.
If you specify #hex colours opacity will be added.
元素的名称已更改。取自 angular-chart 源代码。
此外，一旦您用完颜色，angular-chart 就会为您生成它们。这包括背景颜色的不透明度为 0.2。
如果您指定 #hex 颜色，则将添加不透明度。
Colour specification via global.
通过全局颜色规范。
app.config(['ChartJsProvider', function (ChartJsProvider) {
// Using ChartJsProvider.setOptions('bar', { didn't seem to work for me.
// Nor did $scope.chartColors. Although I only tried that in the controller.
Chart.defaults.global.colors = [
{
backgroundColor: 'rgba(78, 180, 189, 1)',
pointBackgroundColor: 'rgba(78, 180, 189, 1)',
pointHoverBackgroundColor: 'rgba(151,187,205,1)',
borderColor: 'rgba(0,0,0,0',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(151,187,205,1)'
}, {
backgroundColor: 'rgba(229, 229, 229, 1)',
pointBackgroundColor: 'rgba(229, 229, 229, 1)',
pointHoverBackgroundColor: 'rgba(151,187,205,1)',
borderColor: 'rgba(0,0,0,0',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(151,187,205,1)'
}
...
In the source code the colour picking code is currently. Colours set via Chart.js options are reset here (I didn't get this to work).
在源代码中，颜色选择代码是当前。通过 Chart.js 选项设置的颜色在此处重置（我没有让它起作用）。
Pick colours as per angular-chart.js source code:
根据 angular-chart.js 源代码选择颜色：
var colors = angular.copy(scope.chartColors ||
ChartJs.getOptions(type).chartColors ||
Chart.defaults.global.colors
Yes, if you don't specify an object, opacity is set for you. From angular-chart.js:
是的，如果您不指定对象，则会为您设置不透明度。来自 angular-chart.js：
function convertColor (color) {
if (typeof color === 'object' && color !== null) return color;
if (typeof color === 'string' && color[0] === '#') return getColor(hexToRgb(color.substr(1)));
return getRandomColor();
}
...
function getColor (color) {
return {
backgroundColor: rgba(color, 0.2),
pointBackgroundColor: rgba(color, 1),
pointHoverBackgroundColor: rgba(color, 0.8),
borderColor: rgba(color, 1),
pointBorderColor: '#fff',
pointHoverBorderColor: rgba(color, 1)
};
}
回答by Mayra Rodriguez
You wanted to say: "colours"
你想说：“颜色”
$scope.colours = ['#FD1F5E','#1EF9A1','#7FFD1F','#68F000'];
Also we can see the other attributes That we can change , like : legend , series, hover . Next to each chart you can see an option called "settings ", that's all what you can change.
我们还可以看到我们可以更改的其他属性，例如：legend、series、hover。在每个图表旁边，您可以看到一个名为“设置”的选项，这就是您可以更改的全部内容。
回答by Sajeetharan
With the latest version $scope.colors does not seem to work. You need to use chart-dataset-override="colors"
使用最新版本 $scope.colors 似乎不起作用。你需要使用chart-dataset-override="colors"
DEMO
演示
angular.module("app", ["chart.js"]).controller("DoughnutCtrl", function ($scope) {
$scope.results = {'1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, '7': 0, '8': 0, '9': 0, '10': 0};
$scope.labels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
$scope.data = [
[1, 3, 5, 8, 9, 10, 11, 12, 33, 5]
];
$scope.colors = [{
fillColor: 'rgba(59, 89, 152,0.2)',
strokeColor: 'rgba(59, 89, 152,1)',
pointColor: 'rgba(59, 89, 152,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(59, 89, 152,0.8)'
}];
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Multi Slot Transclude</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
</head>
<body ng-app="app" ng-controller="DoughnutCtrl">
<canvas
class="chart chart-bar"
chart-data="data"
chart-labels="labels"
chart-dataset-override="colors">
</canvas>
</body>
</html>