发表新帖
发表新帖

How to change colours for Angular-Chart.js

前端 未结
关注
7 1586
误落风尘
误落风尘 2020-12-03 01:12

I use Angular-Chart.js (the AngularJS Chart.js version) to create a bar chart. The Chart is working with the options except for the colours.

Even if I set them it is

相关标签:
7条回答
  • 栀梦
    2020-12-03 01:38

    Your should declare colours object as an array 

    "colours": [{
    fillColor: 'rgba(47, 132, 71, 0.8)',
    strokeColor: 'rgba(47, 132, 71, 0.8)',
    highlightFill: 'rgba(47, 132, 71, 0.8)',
    highlightStroke: 'rgba(47, 132, 71, 0.8)'
}];

    Working Plunkr

    For more info refer this post / this too.

    For newer versions, see eli0tt's answer, as the parameter names have changed.

    0 讨论(0)
  • 暗喜
    2020-12-03 01:46

    With the latest version $scope.colors does not seem to work. You need to use chart-dataset-override="colors"

    DEMO

    angular.module("app", ["chart.js"]).controller("DoughnutCtrl", function ($scope) {
  $scope.results = {'1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, '7': 0, '8': 0, '9': 0, '10': 0};
  $scope.labels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
  
  $scope.data = [
    [1, 3, 5, 8, 9, 10, 11, 12, 33, 5]
  ];
  $scope.colors = [{ 
    fillColor: 'rgba(59, 89, 152,0.2)',
    strokeColor: 'rgba(59, 89, 152,1)',
    pointColor: 'rgba(59, 89, 152,1)',
    pointStrokeColor: '#fff',
    pointHighlightFill: '#fff',
    pointHighlightStroke: 'rgba(59, 89, 152,0.8)'
  }];
});
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Multi Slot Transclude</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
</head>
<body ng-app="app" ng-controller="DoughnutCtrl">
  <canvas
        class="chart chart-bar"
        chart-data="data"
        chart-labels="labels"
        chart-dataset-override="colors">
      </canvas>
</body>
</html>

    0 讨论(0)
  • 长发绾君心
    2020-12-03 01:47

    It seems that naming changed again. I'm using angular-chart.js 1.0.3 and color management for bar charts works like this :

    colors:[{
      backgroundColor:"#F00",
      hoverBackgroundColor:"#FF0",
      borderColor:"#0F0",
      hoverBorderColor:"#00F"
}];

    In the canvas tag, the name of the attribute is chart-colors

    0 讨论(0)
  • 独厮守ぢ
    2020-12-03 01:50

    I was having the same difficulty. In the docs it says to use "colors" however once I updated my html to:

    chart-colours

    with an angular array of:

    $scope.colours = ['#72C02C', '#3498DB', '#717984', '#F1C40F'];

    It worked!

    0 讨论(0)
  • 遇见更好的自我
    2020-12-03 01:56

    You wanted to say: "colours"

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

    Also we can see the other attributes That we can change , like : legend , series, hover . Next to each chart you can see an option called "settings ", that's all what you can change.

    0 讨论(0)
  • 星月不相逢
    2020-12-03 01:58

    As @pankajparkar said. Just adding that you can also pass html colours and angular-chart.js will define the colour objects properly in rgba with the proper nuances e.g. $scope.colors = ['#FD1F5E','#1EF9A1','#7FFD1F','#68F000'];

    0 讨论(0)
 看不清?
提交回复
热议问题