Angular-Chart.js 색상 변경 방법

Angular-Chart.js 색상 변경 방법

Angular-Chart.js(각도)를 사용합니다.JS Chart.js 버전)을 클릭하여 막대 차트를 만듭니다.차트는 색상을 제외한 옵션과 함께 작동합니다.

서류에 기재되어 있어도 회색으로 남아 있습니다.

<div class="graph-display" ng-controller="chartController">
    <canvas class="chart chart-bar"
    data="bilans.data"
    labels="bilans.labels"
    series="bilans.series"
    options="{
        scaleShowHorizontalLines: true,
        scaleShowVerticalLines: false,
        tooltipTemplate: '<%= value %> $',
        responsive: true
    }"
    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)'
    }"
    ></canvas>
</div>

사실 옵션은 작동하지만 색상은 작동하지 않습니다.내가 뭘 잘못하고 있나요?

신고해야 합니다.colours배열로서의 오브젝트

"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)'
}];

현용 플렁크

상세한 것에 대하여는, 이 투고/이 투고도 참조해 주세요.

---

새로운 버전의 경우 파라미터 이름이 변경되었으므로 eli0t의 답변을 참조하십시오.

저도 같은 어려움을 겪고 있었어요.문서에는 "colors"를 사용하라고 되어 있는데 html을 다음과 같이 업데이트하면 다음과 같습니다.

chart-colours

다음과 같은 각도 배열이 있습니다.

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

됐다!

@pankajparkar가 말했듯이.html 색상과 angular-chart.js도 전달할 수 있다는 것을 추가하는 것만으로 적절한 뉘앙스와 함께 rgba로 색상 객체를 정의할 수 있습니다.$scope.colors = ['#FD1F5E','#1EF9A1','#7FFD1F','#68F000'];

이름이 또 바뀐 것 같아요.angular-chart.js 1.0.3을 사용하고 있는데 막대 그래프의 색상 관리는 다음과 같습니다.

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

캔버스 태그에서 속성 이름은 chart-colors입니다.

2017년 현재 아래 코드로 작업하기 위해 각도 차트를 받았습니다.

1. 요소의 이름이 바뀐다.각도 차트의 소스 코드에서 가져옵니다.

2. 또한 색상이 소진되는 즉시 각도 차트가 색상을 생성합니다.여기에는 배경색에 대한 불투명도 0.2가 포함됩니다.

3. #hex 색상을 지정하면 불투명도가 추가됩니다.

글로벌 색상 지정.

app.config(['ChartJsProvider', function (ChartJsProvider) {

// Using ChartJsProvider.setOptions('bar', { didn't seem to work for me.
// Nor did $scope.chartColors. Although I only tried that in the controller.
Chart.defaults.global.colors = [
  {
    backgroundColor: 'rgba(78, 180, 189, 1)',
    pointBackgroundColor: 'rgba(78, 180, 189, 1)',
    pointHoverBackgroundColor: 'rgba(151,187,205,1)',
    borderColor: 'rgba(0,0,0,0',
    pointBorderColor: '#fff',
    pointHoverBorderColor: 'rgba(151,187,205,1)'
  }, {
    backgroundColor: 'rgba(229, 229, 229, 1)',
    pointBackgroundColor: 'rgba(229, 229, 229, 1)',
    pointHoverBackgroundColor: 'rgba(151,187,205,1)',
    borderColor: 'rgba(0,0,0,0',
    pointBorderColor: '#fff',
    pointHoverBorderColor: 'rgba(151,187,205,1)'
  }
...

소스코드에서 색상 선택 코드는 현재입니다.Chart.js 옵션에서 설정한 색상은 여기서 리셋됩니다(이것을 동작시키지 않았습니다).

angular-chart.js 소스 코드에 따라 색상을 선택합니다.

  var colors = angular.copy(scope.chartColors ||
    ChartJs.getOptions(type).chartColors ||
    Chart.defaults.global.colors

예, 개체를 지정하지 않으면 불투명도가 설정됩니다.angular-chart.js에서:

function convertColor (color) {
  if (typeof color === 'object' && color !== null) return color;
  if (typeof color === 'string' && color[0] === '#') return getColor(hexToRgb(color.substr(1)));
  return getRandomColor();
}
...
function getColor (color) {
  return {
    backgroundColor: rgba(color, 0.2),
    pointBackgroundColor: rgba(color, 1),
    pointHoverBackgroundColor: rgba(color, 0.8),
    borderColor: rgba(color, 1),
    pointBorderColor: '#fff',
    pointHoverBorderColor: rgba(color, 1)
  };
}

'색깔'이라고 말하고 싶었겠지?

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

또한 변경할 수 있는 다른 속성도 볼 수 있습니다.예: 범례, 시리즈, 호버입니다.각 차트 옆에 "settings"라는 옵션이 있습니다.이러한 속성은 변경할 수 있습니다.

최신 버전 $scope.colors에서는 동작하지 않는 것 같습니다.를 사용해야 합니다.

데모

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>

언급URL : https://stackoverflow.com/questions/28647492/how-to-change-colours-for-angular-chart-js