我看过How to change colours for Angular-Chart.js ，但它与整个(数据集)的颜色有关，而不是特定条形。
我正在寻找的是一种应用 Different color for each bar in a bar chart; ChartJS 的方法到 Angular。
所以，我有一个条形图:
<canvas id="locationBar" class="chart chart-bar" data="chartParams.votes" labels="chartParams.listOfLocations" series="chartParams.series" colours="chartParams.colours" options="chartParams.options"></canvas>
使用以下 Angular 代码(当然在 Controller 中)
$scope.chartParams = {
listOfLocations: ['Trenzalore','Earth','Caprica','Sol','Tau Ceti'],
votes: [[5,10,6,7,2]],
series: ["Nice Places"],
colours: [{fillColor:getRandomColour()}],
options: {barShowStroke : false}
};
其中 getRandomColour() 将返回随机颜色。
现在，colours 字段将此颜色应用于所有条形:
当我真的想为每个栏使用不同的颜色时:
最佳答案
使用最新版本的angular-chart.js ，这是一个根据条件更改颜色的示例，而不修改库本身。相反，它使用 chart-dataset-override 功能。
诀窍是使用只有一个数据集的系列。
HTML
<div ng-controller="chartControl">
<canvas id="bar" class="chart chart-bar"
chart-data="goal.data"
chart-labels="goal.labels"
chart-options="goal.options"
chart-series="goal.series"
chart-dataset-override="goal.datasetOverride"></canvas>
</div>
JavaScript
在 Controller 中添加如下代码:
var exceeded = '#27ae60';
var achieved = '#bdc3c7';
var defeated = '#e74c3c';
$scope.goal = [];
$scope.goal.goal = 3;
$scope.goal.series = [ 'Visits' ];
$scope.goal.labels = [
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'
];
$scope.goal.data = [
[5, 2, 3, 3, 3, 4, 2, 3, 4],
];
var backgroundColours = [];
// Assign the background colour based on whether the goal was achieved.
for( var i = 0; i < $scope.goal.data[0].length; i++ ) {
var v = $scope.goal.data[0][i];
if( v > $scope.goal.goal ) {
backgroundColours[i] = exceeded;
}
else if( v < $scope.goal.goal ) {
backgroundColours[i] = defeated;
}
else {
backgroundColours[i] = achieved;
}
}
// Create a place to hold the background colours.
$scope.goal.datasetOverride = [{ backgroundColor: [] }];
// Assign the colours to the pre-populated array.
$scope.goal.datasetOverride[0].backgroundColor = backgroundColours;
$scope.goal.options = {
barShowStroke: false,
scales: {
yAxes: [{
ticks: {
min: 0,
max: 7,
stepSize: 1
}
}]
}
};
输出
产生:
相关链接
关于javascript - 如何为 angular-chart.js 中的每个栏设置不同的颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29999963/