it-swarm.com.de

So ändern Sie die Farben für Angular-Chart.js

Ich verwende Angular-Chart.js (die Version AngularJS Chart.js ), um ein Balkendiagramm zu erstellen. Das Diagramm arbeitet mit den Optionen außer den Farben.

Selbst wenn ich sie einstelle, wird in der Dokumentation angezeigt, sie bleiben grau.

<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>

Eigentlich funktionieren die Optionen, aber die Farben nicht. Mache ich etwas falsch?

25
Lucien Dubois

Ihr colours-Objekt sollte als Array deklariert werden 

"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)'
}];

Working Plunkr

Weitere Informationen finden Sie in diesem Beitrag / diesem auch.


Für neuere Versionen siehe eli0tt's Antwort , da sich die Parameternamen geändert haben.

44
Pankaj Parkar

Ich hatte die gleichen Schwierigkeiten. In den Dokumenten heißt es, "Farben" zu verwenden, sobald ich mein HTML aktualisiert habe:

chart-colours 

mit einem winkeligen Array von:

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

Es funktionierte!

11
Kate S

Es scheint, dass sich die Benennung wieder geändert hat. Ich benutze angle-chart.js 1.0.3 und das Farbmanagement für Balkendiagramme funktioniert folgendermaßen:

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

Im Canvas-Tag lautet der Name des Attributs chart-colors

7
eli0tt

Wie @pankajparkar sagte. Fügen Sie einfach hinzu, dass Sie auch HTML-Farben übergeben können, und angle-chart. $scope.colors = ['#FD1F5E','#1EF9A1','#7FFD1F','#68F000'];

7
jtblin

Ab 2017 bekam ich Winkeltabellen, um mit dem folgenden Code zu arbeiten. 

  1. dass die Namen der Elemente geändert werden. Entnommen aus dem Eckcode-Quellcode. 

  2. sobald Sie von den Farben ausgehen, werden die Winkeltabellen diese für Sie erzeugen. Dies beinhaltet eine Deckkraft von 0,2 für Hintergrundfarben. 

  3. Wenn Sie #hex-Farben angeben, wird die Deckkraft hinzugefügt.

Farbspezifikation über 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)'
  }
...

Im Quellcode ist der Farbauswahlcode aktuell. Farben, die über die Chart.js-Optionen festgelegt wurden, werden hier zurückgesetzt (ich habe das nicht verstanden).

Wählen Sie die Farben gemäß dem Quellcode von angle-chart.js aus: 

  var colors = angular.copy(scope.chartColors ||
    ChartJs.getOptions(type).chartColors ||
    Chart.defaults.global.colors

Ja, wenn Sie kein Objekt angeben, wird die Deckkraft für Sie festgelegt. Aus eckig-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)
  };
}
6
Interlated

Sie wollten sagen: "Farben"

$scope.colours = ['#FD1F5E','#1EF9A1','#7FFD1F','#68F000'];

Wir können auch die anderen Attribute sehen, die wir ändern können, wie: Legende, Serie, Schwebeflug. Neben jedem Diagramm sehen Sie eine Option namens "Einstellungen", das ist alles, was Sie ändern können.

Mit der neuesten Version scheint $ scope.colors nicht zu funktionieren. Sie müssenchart-dataset-override="colors"verwenden.

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>

0
Sajeetharan