Winkel chartjs 2 - verwenden Multi bg-Farbe für Diagramme

Question

Plop,

I der Richtlinie Chart-Farbe von angular-chartjs Hilfe benötigen.

Davor wurde die Richtlinie Chart-Farben genannt.

möchte ich mehrere Farben auf mein Diagramm setzen (wie Tortendiagramm ->http://jtblin.github.io/angular-chart.js/)

Ich habe versucht, verschiedene Dinge:

$scope["graph5"].colors = [{fillColor:["#FF0000", "#00FF00", "#0000FF", "#00FFFF", "#FFFF00"]}]; 

$scope["graph5"].colors = [ { fillColor: '#ffff00' }, { fillColor: '#0066ff' } ]; 

$scope["graph5"].colors = [{ // blue 
     fillColor: 'rgba(151,187,205,0.2)', 
     strokeColor: 'rgba(151,187,205,1)', 
     pointColor: 'rgba(151,187,205,1)', 
     pointStrokeColor: '#fff', 
     pointHighlightFill: '#fff', 
     pointHighlightStroke: 'rgba(151,187,205,0.8)' 
    }]; 

Und mein HTML:

<canvas class="chart chart-doughnut" chart-data="graph5.data" chart-labels="graph5.labels" chart-options="graph5.options" chart-colors="graph5.colors"></canvas> 

Thanx!

PS: Sorry für mein schlechtes Englisch ...

Answer 1

Das ist ziemlich simple'ish ... Aber nicht wirklich. Hoffentlich kannst du folgen.

Controller:

 $scope.data = { 
     labels: ['test', 'test2', 'test3', 'test4', 'test5'], 
     datasets: [ 
      { 
       label: 'My previous results', 
       fillColor: 'rgba(220,220,220,0.2)', 
       strokeColor: 'rgba(220,220,220,1)', 
       pointColor: 'rgba(220,220,220,1)', 
       pointStrokeColor: '#fff', 
       pointHighlightFill: '#fff', 
       pointHighlightStroke: 'rgba(220,220,220,1)', 
       data: [65, 79, 90, 81, 16] 
      }, 
      { 
       label: 'My current results', 
       fillColor: 'rgba(151,187,205,0.2)', 
       strokeColor: 'rgba(151,187,205,1)', 
       pointColor: 'rgba(151,187,205,1)', 
       pointStrokeColor: '#fff', 
       pointHighlightFill: '#fff', 
       pointHighlightStroke: 'rgba(151,187,205,1)', 
       data: [28, 48, 40, 19, 96] 
      } 
     ] 
    }; 

html-Datei:

 <div ng-controller="ChartController" class="ng-scope"> 
        <canvas class="tc-chart" tc-chartjs-radar chart-options="options" chart-data="data" chart-legend="chart4"></canvas> 
        <div class="someclass"> 
         <div tc-chartjs-legend="" chart-legend="chart4" class="inline ng-isolate-scope"><ul class="tc-chart-js-legend"><li><span style="background-color:rgba(220,220,220,1)"></span>My First dataset</li><li><span style="background-color:rgba(151,187,205,1)"></span>My Second dataset</li></ul></div> 
        </div> 
       </div> 

Hoffentlich gibt Ihnen die richtige Richtung.