Verwenden von Farbverlauf in eckigen-chart.js

Question

Ich versuche, Gradient für meine Diagramme mit angularjs1 mit eckigen-chart.js Version 1.0.0 zu verwenden, aber es scheint, dass Fillcolor nicht erkennen Gradienten hier ist mein Code unten

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>

Wie kann Steigung erklären, damit es funktioniert? Ich habe es versucht

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

aber es funktioniert auch nicht.

Answer 1

Ich hoffe, diese Antwort wäre hilfreich für diejenigen, die das gleiche Problem mit Farbverlauf haben wie ich!

Also was für mich funktionierte, ist, einen Ereignislistener im Diagramm zu erstellen und meine Funktion changeColor aufzurufen, wenn das Ereignisdiagramm ausgegeben wird. Hier

ist der Code in meinem 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>