角度チャートの使用方法：色とフォント

Question

このグラフのフォントサイズと罫線の色を変更したいと思います。だから私はそれをどうするのか分からず、私はこれらのオプションを別の場所に置こうとしましたが、何も動作しないようです。私は角度チャートオプションとChart.jsオプションの間のバインディングのロジックを得ることができません、それらを操作する一般的な方法はありますか？

ここでディレクティブです：ここで

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

は、スコープの定義です：

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

だけでは動作しませんchart-colorsて色を変更します。

Answer 1

オプションの外観、chart.js 2.0を使用している場合は、最新のangle-chart.jsを使用する必要があります。

属性はchart-colorsになり、chart.js 2.0では色のプロパティが変更されています。

Answer 2

あなたは2シリーズを持っているので、あなたが$scope.coloursすなわち

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

---

フィドルに2つのエントリを持っていることを確認する - ことでhttp://jsfiddle.net/cpdh1g19/（最初の行の色は、2秒後に変更されます）