2017-09-15 97 views
0

目前我使用角度圖API的預期產生圖表角度圖 - 更改圖表的顏色

Angular Chart

這裏我用下面的選項在圖中的顏色,但它不工作您能有所幫助,這裏有什麼問題(我附上圖片以及)

我希望得到不同的顏色餅圖

的每個部分

控制器

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