如何更改Angular-Chart.js的颜色

Question

我使用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>

实际上,选项是有效的,但颜色不是.难道我做错了什么？

Answer 1

您应该将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)'
}];

工作Plunkr

有关更多信息,请参阅此帖/此.

对于较新的版本,请参阅eli0tt的答案,因为参数名称已更改.

Answer 2

我遇到了同样的困难.在文档中它说使用"​​颜色"但是一旦我将我的html更新为:

chart-colours

角度数组:

$scope.colours = ['#72C02C', '#3498DB', '#717984', '#F1C40F'];

有效!

Answer 3

正如@pankajparkar所说.只需添加你也可以传递html颜色和angular-chart.js将在rgba中正确定义颜色对象,具有适当的细微差别,例如$scope.colors = ['#FD1F5E','#1EF9A1','#7FFD1F','#68F000'];

Answer 4

似乎命名再次改变.我正在使用angular-chart.js 1.0.3并且条形图的颜色管理如下所示:

colors:[{
      backgroundColor:"#F00",
      hoverBackgroundColor:"#FF0",
      borderColor:"#0F0",
      hoverBorderColor:"#00F"
}];

在canvas标记中,属性的名称是chart-colors

Answer 5

截至2017年,我使用角度图表来处理以下代码.

1. 元素的名称已更改.取自角图表源代码.

2. 另外,只要你用完了颜色,angular-chart就会为你生成它们.这包括背景颜色的不透明度为0.2.

3. 如果指定#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)
  };
}