我在我正在处理的项目中使用 angular-chartJS,我需要为条形图中的每个条使用不同的颜色。
Canvas :
<canvas id="bar" class="chart chart-bar" data="medal_data" labels="medal_ticks"></canvas>
Controller :
$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'];
我尝试将属性 colours="medals_colours"
添加到我的 Canvas ,唯一的问题是它只使用数组中的第一种颜色,而我想要的是每种颜色代表每一列。所以#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
的 index
变量将确保颜色将按照我们在数组中给出的顺序应用在 Bar 上。我们的颜色将更改为 $scope.medals_colours = [{fillColor:['#087D76', '#B3BC3A', '#38B665', '#8B4A9D']}];
。
更改代码
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[index] || dataset.fillColor, //<--getting color using index
highlightFill: dataset.highlightFill || dataset.fillColor,
highlightStroke: dataset.highlightStroke || dataset.strokeColor
}));
}, 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>
Controller
app.controller('jsonServerBox', function($scope) {
$scope.medal_ticks = ['Gold', 'Silver', 'Bronze', 'Not passed'];
$scope.series = ['Medaljer'];
$scope.medals_colours = [{fillColor:['#087D76', '#B3BC3A', '#38B665', '#8B4A9D']}];
$scope.medal_data = [['1', '5', '2', '0']];
});
我知道它看起来确实很老套,但我们必须做到。
感谢@tpie this answer
关于javascript - angular-chartjs 条形图中每列的不同颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30485172/