javascript - using gradient colors in angular-chart.js - Stack Overflow

admin管理员组

文章数量:1402544

i am trying to use gradient for my charts with angularjs1 using angular-chart.js version 1.0.0 but it seems that fillcolor does not recognize gradient here is my code down below

var app = angular.module('starter', ['ionic', 'ngCordova',   'chart.js',  'ionic-modal-select']).controller('graphCtrl', function($scope) {
  

 var ctx =  document.getElementById('base2').getContext('2d');
  
 var gradient =ctx.createLinearGradient(0, 0, 0, 400);
    gradient.addColorStop(0, 'rgba(243, 103, 101,0.5)');
    gradient.addColorStop(1, 'rgba(0, 89, 179,0.5)');
  
$scope.labels2 = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
 
 $scope.data2 = [
      [65, -59, 80, 81, -56, 55, -40],
      [28, 48, -40, 19, 86, 27, 90]
  ];
 $scope.type2 = 'bar';
  
  $scope.colors2 = [{
     fillColor: gradient,gradient angular js not responding
     strokeColor: 'rgba(151,187,205,1)',
     pointColor: 'rgba(151,187,205,1)',
     pointStrokeColor: '#fff',
     pointHighlightFill: '#fff',
     pointHighlightStroke: 'rgba(151,187,205,0.8)'
   }, {
     pointDot: false,
     pointDotRadius: 0,
     fillColor: gradient,
     strokeColor: 'rgba(187,155,206,1)',
     pointColor: '#BB9BCE',
    pointStrokeColor: 'rgba(187,155,206,1)',
    pointHighlightFill: '#fff',
    pointHighlightStroke: 'rgba(187,155,206,1)'
   }];
  
 $scope.datasetOverride2 = [{
      label: "Bar chart",
      borderWidbelowbelowth: 1,
      type: 'bar'
      
  }, {
      label: "Line chart",
      borderWidth: 3,

      hoverBackgroundColor: "rgba(255,99,132,0.4)",
      hoverBorderColor: "rgba(255,99,132,1)",
      type: 'line'
  }];
  
  
  });

<script src=".2.23/angular.min.js"></script>
<div class="chart-container" >
    <canvas id="base2" class="chart-base" chart-type="type2" chart-          data="data2" chart-labels="labels2" chart-colours="colors2" chart-      options="options2" chart-dataset-override="datasetOverride2" >
   </canvas>
 </div>

i am trying to use gradient for my charts with angularjs1 using angular-chart.js version 1.0.0 but it seems that fillcolor does not recognize gradient here is my code down below

var app = angular.module('starter', ['ionic', 'ngCordova',   'chart.js',  'ionic-modal-select']).controller('graphCtrl', function($scope) {
  

 var ctx =  document.getElementById('base2').getContext('2d');
  
 var gradient =ctx.createLinearGradient(0, 0, 0, 400);
    gradient.addColorStop(0, 'rgba(243, 103, 101,0.5)');
    gradient.addColorStop(1, 'rgba(0, 89, 179,0.5)');
  
$scope.labels2 = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
 
 $scope.data2 = [
      [65, -59, 80, 81, -56, 55, -40],
      [28, 48, -40, 19, 86, 27, 90]
  ];
 $scope.type2 = 'bar';
  
  $scope.colors2 = [{
     fillColor: gradient,gradient angular js not responding
     strokeColor: 'rgba(151,187,205,1)',
     pointColor: 'rgba(151,187,205,1)',
     pointStrokeColor: '#fff',
     pointHighlightFill: '#fff',
     pointHighlightStroke: 'rgba(151,187,205,0.8)'
   }, {
     pointDot: false,
     pointDotRadius: 0,
     fillColor: gradient,
     strokeColor: 'rgba(187,155,206,1)',
     pointColor: '#BB9BCE',
    pointStrokeColor: 'rgba(187,155,206,1)',
    pointHighlightFill: '#fff',
    pointHighlightStroke: 'rgba(187,155,206,1)'
   }];
  
 $scope.datasetOverride2 = [{
      label: "Bar chart",
      borderWidbelowbelowth: 1,
      type: 'bar'
      
  }, {
      label: "Line chart",
      borderWidth: 3,

      hoverBackgroundColor: "rgba(255,99,132,0.4)",
      hoverBorderColor: "rgba(255,99,132,1)",
      type: 'line'
  }];
  
  
  });

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="chart-container" >
    <canvas id="base2" class="chart-base" chart-type="type2" chart-          data="data2" chart-labels="labels2" chart-colours="colors2" chart-      options="options2" chart-dataset-override="datasetOverride2" >
   </canvas>
 </div>

How can declare gradient so it works ? i have tried this

var ctx = angular.element(document).find("canvas")[0].getContext("2d");
var gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(243, 103, 101,0.5)');
gradient.addColorStop(1, 'rgba(0, 89, 179,0.5)');

but it doesn't work either.

• javascript
• angularjs
• chart.js
• angular-chart

Share Improve this question Follow asked Aug 4, 2016 at 8:38 AsmaFAsmaF 11311 silver badge88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

I hope this answer would be helpful for those who have the same problem with gradient as me!

So what worked for me is to create an event listner on chart and call my function changeColor when the event chart is emitted.

Here is the code in my controller:

var changeColor = function(chart){
var ctx = chart.chart.ctx;
var gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(243, 103, 101,0.5)');
gradient.addColorStop(1, 'rgba(0, 89, 179,0.5)');
chart.chart.config.data.datasets[0].backgroundColor = gradient;};


$scope.$on('chart-create', function (evt, chart) {
if(chart.chart.canvas.id === 'base2') {
  changeColor(chart);
  chart.update();
}

HTML code

<canvas id="base2" class="chart-base" chart-type="type2" chart-data="data2" chart-labels="labels2" chart-colors="colors2" chart-options="options2" >
</canvas>

本文标签： javascriptusing gradient colors in angularchartjsStack Overflow