在angular-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

我希望這個答案對那些和我一樣有漸變問題的人有幫助！

所以對我有用的是在圖表上創建一個事件列表器，並在發出事件圖表時調用我的函數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>