在 angular-chart.js 中使用渐变颜色
using gradient colors in angular-chart.js
我正在尝试使用 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)');
但是也没用。
希望这个回答对和我有相同渐变问题的朋友有所帮助!
所以对我有用的是在图表上创建一个事件监听器,并在事件图表发出时调用我的函数 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>
我正在尝试使用 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)');
但是也没用。
希望这个回答对和我有相同渐变问题的朋友有所帮助!
所以对我有用的是在图表上创建一个事件监听器,并在事件图表发出时调用我的函数 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>