Verwendung für Winkel-Diagramm: Farben und Schriftarten

Question

Ich möchte Schriftgröße und Rahmenfarben für dieses Diagramm ändern. Daher weiß ich nicht, wie ich das machen soll. Ich habe versucht, diese Optionen an verschiedenen Orten zu finden, aber nichts scheint zu funktionieren. Ich kann die Logik der Bindung zwischen eckigen Diagrammoptionen und Chart.js Optionen nicht erhalten, gibt es eine gemeinsame Möglichkeit, sie zu manipulieren?

Hier ist die Richtlinie:

   <canvas class="chart chart-line" chart-y-axes="axes" chart-data="data" chart-labels="labels" 
         chart-series="series" chart-options="options" chart-legend="true" chart-colours="colours"></canvas> 

Hier sind die Bereichsdefinitionen:

$scope.labels = ["January", "February", "March", "April", "May", "June", "July"]; 
     $scope.series = ['Series A', 'Series B']; 
     $scope.axes = ["y-axis-1", "y-axis-2"]; 
     $scope.data = [ 
      [65, 59, 80, 81, 56, 55, 40], 
      [28, 48, 40, 19, 86, 27, 90] 
     ]; 
     $scope.colours = [{ 
      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)' 
     }] 
     $scope.options = { 
      datasetFill: false, 
      showLines: true, 
      elements: 
      { 
       line: 
       { 
        fill: false, 
        tension: 0.0001 
       }, 
       point: 
       { 
        radius: 0 
       } 
      }, 
      scales: 
      { 
       yAxes: [ 
        { 
         type:"linear", 
         id:$scope.axes[0], 
         gridLines: 
         { 
          display: false 
         } 
        }, 
        { 
         type:"linear", 
         id:$scope.axes[1], 
         position: "right", 
         gridLines: 
         { 
          display: false 
         }, 
         scaleLabel: 
         { 
          display: true 
         } 
        }] 
      }, 
     }; 

Ändern der Farben durch chart-colors funktioniert einfach nicht.

Answer 1

By (die Farbe für die erste Zeile wird nach 2 Sekunden aus) Das Aussehen der Optionen, Sie verwenden chart.js 2.0, müssen Sie die neuesten eckigen-chart.js verwenden.

Beachten Sie, dass das Attribut jetzt chart-colors ist und die Farbeigenschaften in chart.js 2.0 geändert wurden.

Answer 2

Da Sie 2-Serie haben, stellen Sie sicher, dass Sie haben 2 Einträge in $scope.colours dh

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

---

Fiddle - http://jsfiddle.net/cpdh1g19/