угловой chartjs 2 - использование нескольких BG-цвета для диаграмм

Question

Plop,

мне нужна помощь с директивой штурманской цвета angular-chartjs.

Раньше директива называлась диаграммой цветов.

Я хочу установить несколько цветов на моей карте (например, круговая диаграмма ->http://jtblin.github.io/angular-chart.js/)

Я попробовал несколько вещей:

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

И мой 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: Извините за мой плохой английский ...

Answer 1

Это довольно simple'ish ... Но не совсем. Надеюсь, вы сможете следовать.

Контроллер:

 $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 файл:

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

Надеется, что это дает вам правильное направление.