我正在我正在进行的项目中使用angular-chartJS,并且我需要为条形图中的每个条形图使用不同的颜色.
帆布：
<canvas id="bar" class="chart chart-bar" data="medal_data" labels="medal_ticks"></canvas>
控制器：
$scope.medal_ticks = ['Gold','Silver','Bronze','Not passed']; $scope.series = ['Medaljer']; $scope.medals_colours= ['#087D76','#B3BC3A','#38B665','#8B4A9D']; $scope.medal_data = ['1','5','2','0'];
我试图在我的画布上添加属性colors =“medals_colours”,唯一的问题是它只使用数组中的第一种颜色,而我想要的是每种颜色代表每一列.因此,#087D76用于表示Gold,#B3BC3A用于表示Silver,依此类推
解决方法
由于您希望为图形中的每个条形图提供不同的颜色,因此您将在数组中传递这些值.但事情是chart.js不支持这种类型的功能.
原因
我们能够在条形区域看到的颜色只是fillColor选项,如果你看一下chart.js Line的源代码
码
helpers.each(dataset.data,function(dataPoint,index) {
//Add a new point for each piece of data,passing any required data to draw.
datasetObject.bars.push(new this.BarClass({
value: dataPoint,label: data.labels[index],datasetLabel: dataset.label,strokeColor: dataset.strokeColor,fillColor: dataset.fillColor,//<--This line responsible for filling color
highlightFill: dataset.highlightFill || dataset.fillColor,highlightStroke: dataset.highlightStroke || dataset.strokeColor
}));
},this);
上面的代码清楚地表明fillColor需要字符串.无论如何,你只能传递该字符串中的一种颜色.只有一种颜色适用于条形系列.如果我们想让您的需求可行,那么我们需要在chart.js中进行更改.
要在chart.js中进行更改
我们需要在this line中将fillColor：dataset.fillColor更改为fillColor：dataset.fillColor [index],以便我们可以传递需要应用于每个图表条上的颜色数组. .each的索引变量将确保颜色将按照我们在数组中给出的方式应用于Bar.我们的颜色将更改为$scope.medals_colours = [{fillColor：[‘#087D76′,’#B3BC3A’,’#38B665′,’#8B4A9D’]}];.
更改了代码
helpers.each(dataset.data,fillColor: dataset.fillColor[index] || dataset.fillColor,//<--getting color using index
highlightFill: dataset.highlightFill || dataset.fillColor,this);
<div class="graph-display" ng-controller="jsonServerBox"> <canvas id="bar" class="chart chart-bar" data="medal_data" labels="medal_ticks" colours="medals_colours"></canvas> </div>
调节器
app.controller('jsonServerBox',function($scope) {
$scope.medal_ticks = ['Gold','Not passed'];
$scope.series = ['Medaljer'];
$scope.medals_colours = [{fillColor:['#087D76','#8B4A9D']}];
$scope.medal_data = [['1','0']];
});
我知道它确实看起来很黑,但我们必须做到.
Kudos去了@tpie this answer
