2017-09-15 5 views
0

の色の変更私はコントローラ 角度チャート - 現在、私はグラフの色を持っているオプションの下に使用されてきた。しかし、予想通りのが機能していない。ここグラフ</p> <p><a href="http://jtblin.github.io/angular-chart.js/" rel="nofollow noreferrer"><strong>Angular Chart</strong></a></p> <p>を生成するための角度チャートAPIを使用していますチャート

円グラフ

のセクションごとに異なる色を取得したい

(私も画像を添付している)、ここで何が間違っている、助けることができる

app.controller('PieCtrl', function($scope, myservice) { 
    $scope.$on('values', function(event, data) { 
    $scope.releasename = data.b; 
    console.log(data); 
    $scope.colors=['#803690', '#00ADF9', '#DCDCDC', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360']; 
    $scope.labels = data.b; 
    $scope.series = ['My Series']; 
    $scope.data = [ 
     data.c 
    ]; 
    }); 
}); 

キャンバスHTML

<div ng-controller="PieCtrl" class="col-md-3"> 
<canvas id="data" class="chart chart-pie" width="500px" height="200px" chart-data="data" chart-labels="labels" chart-colors="colors"> 
     chart-series="series" 
</canvas> 
</div> 

実際のグラフ

として

enter image description here

期待グラフとして

enter image description here

答えて

1

あなたの円グラフのために異なる色を設定するには、datasetOverrideプロパティを使用することができます。

HTML

<div ng-controller="PieCtrl" class="col-md-3"> 
<canvas id="data" class="chart chart-pie" width="500px" height="200px" chart-data="data" chart-labels="labels" chart-dataset-override="datasetOverride"> 
     chart-series="series" 
</canvas> 
</div> 

コントローラ

app.controller('PieCtrl', function($scope, myservice) { 
    $scope.$on('values', function(event, data) { 
     $scope.releasename = data.b; 
     $scope.labels = data.b; 
     $scope.series = ['My Series']; 
     $scope.data = [ 
     data.c 
     ]; 
     $scope.datasetOverride = [{ 
     backgroundColor: ['#803690', '#00ADF9', '#DCDCDC', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'] 
     }]; 
    }); 
}); 
+0

おかげで、今でチェック作男! – Batman

+0

あなたは大歓迎です! –

+0

確かにそれを受け入れるには10分が必要です。 – Batman

関連する問題

 関連する問題