更改angularjs中图表的每个条形颜色

时间:2017-05-04 07:30:15

标签: angularjs

我正在使用angularjs开发一个应用程序,我想使用图表。因为我无法改变图表栏的颜色。我想在控制器或CSS中编码。

<div class="container-fluid" ng-show="PieChart">
  <div class="well well-sm">
  <div class="row">
    <form action="" method="">
    <div class="col col-sm-14" id="canvas">
    <div class="col col-sm-0.5">
      <span style="cursor:pointer"><div class="pull-right"><i class="material-icons" data-toggle="tooltip" data-placement="bottom" title="Close" style="color:black; align-self: top; margin-left: 90px;" ng-click="closeAll()">clear</i></div>
    </span></div>
    <canvas id="pie" class="chart chart-pie"
        chart-data="data" chart-labels="labels" chart-options="options" chart-colours="colors">

    </canvas> 
    </div>
    </form>
  </div>
</div>
</div>

//控制器

$scope.PieChart=false;
 $scope.AllUsersPieChart = function(){
     $scope.labels = ['leads','member','past member'];
     $scope.series = $scope.temparr;
     $scope.data = [$scope.lead,$scope.member,$scope.pastmember];
     $scope.BarChart=false;
     $scope.PieChart=true;
     $scope.coachTable=false;
     $scope.options = {legend: {display: true},
        //                position: 'bottom',
        //                title: {display: true,
        //                fontsize: 19,
        //                text: 'PieChart for Coaches'
        // }
        responsive: true
     };

//我尝试使用$ scope.colours = [“#1E824C”,“#1E824C”,“#1E824C”];但它不起作用。!!!

1 个答案:

答案 0 :(得分:0)

你想说:“颜色”

  $scope.colours = ['#FD1F5E','#1EF9A1','#7FFD1F','#68F000'];

我们还可以看到我们可以更改的其他属性,例如:图例,系列,悬停。

在每个图表旁边,您可以看到一个名为“设置”的选项,这就是您可以更改的内容。