gradient-chart.js의 그래디언트 색상 사용

Question

angular-chart.js 버전 1.0.0을 사용하여 angularjs1이있는 차트에 그래디언트를 사용하려하지만 fillcolor가 그래디언트를 인식하지 못하는 것 같습니다. 내 코드는 아래

입니다. 작동 있도록

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.com/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>

어떻게 그라데이션을 선언 할 수 있습니까? 나는 이것을 시도했다

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)'); 

그러나 작동하지 않는다.

Answer 1

이 답변이 나 같은 그라디언트와 동일한 문제가있는 사람들에게 도움이되기를 바랍니다.

그래서 나에게 도움이되는 것은 차트에서 이벤트 listner를 만들고 이벤트 차트가 생성 될 때 changeColor 함수를 호출하는 것입니다. 여기

내 컨트롤러에 코드입니다 :

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 코드

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