[英]How to change colours for Angular-Chart.js
我使用Angular-Chart.js（AngularJS Chart.js版本）来创建条形图。 图表正在使用除颜色之外的选项。
即使我设置它们，它在文档中指出，它们仍然是灰色的。
<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>
实际上，选项是有效的，但颜色不是。 难道我做错了什么？
我遇到了同样的困难。 在文档中它说使用“颜色”但是一旦我将我的html更新为：
chart-colours
角度数组：
$scope.colours = ['#72C02C', '#3498DB', '#717984', '#F1C40F'];
有效！
正如@pankajparkar所说。 只需添加你也可以传递html颜色和angular-chart.js将在rgba中正确定义颜色对象，具有适当的细微差别，例如$scope.colors = ['#FD1F5E','#1EF9A1','#7FFD1F','#68F000'];
似乎命名再次改变。 我正在使用angular-chart.js 1.0.3并且条形图的颜色管理如下所示：
colors:[{
backgroundColor:"#F00",
hoverBackgroundColor:"#FF0",
borderColor:"#0F0",
hoverBorderColor:"#00F"
}];
在canvas标记中，属性的名称是chart-colors
截至2017年，我使用角度图表来处理以下代码。
元素的名称已更改。 取自角图表源代码。
另外，只要你用完了颜色，angular-chart就会为你生成它们。 这包括背景颜色的不透明度为0.2。
如果指定#hex颜色，则会添加不透明度。
全球颜色规范。
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)'
}
...
在源代码中，颜色选择代码是当前的。 通过Chart.js选项设置的颜色在这里重置（我没有让它工作）。
根据angular-chart.js源代码选择颜色：
var colors = angular.copy(scope.chartColors ||
ChartJs.getOptions(type).chartColors ||
Chart.defaults.global.colors
是的，如果您未指定对象，则会为您设置不透明度。 来自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)
};
}
你想说：“颜色”
$scope.colours = ['#FD1F5E','#1EF9A1','#7FFD1F','#68F000'];
我们还可以看到我们可以改变的其他属性，例如：图例，系列，悬停。 在每个图表旁边，您可以看到一个名为“设置”的选项，这就是您可以更改的内容。
使用最新版本$ 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>
如何在angular-chart.js中为每个条设置不同的颜色？
[英]How can I set different colours for each bar in angular-chart.js?
如何安装Chart.js和angular-chart.js（错误：需要包含Chart.js库）
[英]How to install Chart.js and angular-chart.js (Error: Chart.js library needs to be included)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.