如何在 angular 图表 js 中的每个柱上设置单一颜色
How to set single color on each bar in angular chart js
这是我的 html 代码:
<canvas id="bar" class="chart chart-bar"
chart-data="expenseData" chart-labels="labels" chart-series="series" chart-options="chartOptions" colours= "colours">
</canvas>
这里是js代码:
var setGraphDate = function () {
var xData = [];
var yData = [];
$scope.Data.ExpenseRecords.forEach(function (g) {
yData.push(g.PercentOfCompletion);
xData.push(g.TspShortName);
});
$scope.colours = "rgba(224, 108, 112, 1)";
$scope.labels = xData;
$scope.expenseData = yData;
$scope.series = ['Expense Graph'];
$scope.chartOptions = {
legend: {
display: false
},
},
title: {
display: true,
text: 'TSP Burn Rate'
},
// Option to show VALUES on chart
events: false,
tooltips: {
enabled: false
},
hover: {
animationDuration: 0
}
};
每个条的颜色都不同,并且在每次重新加载时也会发生变化。
我只想要所有条形中的蓝色。
使用
chart-dataset-override="colors"
演示版
angular.module("app", ["chart.js"]).controller("DoughnutCtrl", function ($scope) {
$scope.results = {'1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, '7': 0, '8': 0, '9': 0, '10': 0};
$scope.labels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
$scope.data = [
[1, 3, 5, 8, 9, 10, 11, 12, 33, 5]
];
$scope.colors = [{
fillColor: 'rgba(59, 89, 152,0.2)',
strokeColor: 'rgba(59, 89, 152,1)',
pointColor: 'rgba(59, 89, 152,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(59, 89, 152,0.8)'
}];
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Multi Slot Transclude</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
</head>
<body ng-app="app" ng-controller="DoughnutCtrl">
<canvas
class="chart chart-bar"
chart-data="data"
chart-labels="labels"
chart-dataset-override="colors">
</canvas>
</body>
</html>
我已经通过以下方式解决了这个问题:
$scope.datasetOverride =
{
backgroundColor: "#4E4EFF",
borderColor: "#2E2E99"
};
<canvas id="bar" class="chart chart-bar"
chart-data="expenseData" chart-labels="labels" chart-series="series" chart-options="chartOptions" chart-dataset-override="datasetOverride">
</canvas>
这是我的 html 代码:
<canvas id="bar" class="chart chart-bar"
chart-data="expenseData" chart-labels="labels" chart-series="series" chart-options="chartOptions" colours= "colours">
</canvas>
这里是js代码:
var setGraphDate = function () {
var xData = [];
var yData = [];
$scope.Data.ExpenseRecords.forEach(function (g) {
yData.push(g.PercentOfCompletion);
xData.push(g.TspShortName);
});
$scope.colours = "rgba(224, 108, 112, 1)";
$scope.labels = xData;
$scope.expenseData = yData;
$scope.series = ['Expense Graph'];
$scope.chartOptions = {
legend: {
display: false
},
},
title: {
display: true,
text: 'TSP Burn Rate'
},
// Option to show VALUES on chart
events: false,
tooltips: {
enabled: false
},
hover: {
animationDuration: 0
}
};
每个条的颜色都不同,并且在每次重新加载时也会发生变化。
我只想要所有条形中的蓝色。
使用
chart-dataset-override="colors"
演示版
angular.module("app", ["chart.js"]).controller("DoughnutCtrl", function ($scope) {
$scope.results = {'1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, '7': 0, '8': 0, '9': 0, '10': 0};
$scope.labels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
$scope.data = [
[1, 3, 5, 8, 9, 10, 11, 12, 33, 5]
];
$scope.colors = [{
fillColor: 'rgba(59, 89, 152,0.2)',
strokeColor: 'rgba(59, 89, 152,1)',
pointColor: 'rgba(59, 89, 152,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(59, 89, 152,0.8)'
}];
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Multi Slot Transclude</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
</head>
<body ng-app="app" ng-controller="DoughnutCtrl">
<canvas
class="chart chart-bar"
chart-data="data"
chart-labels="labels"
chart-dataset-override="colors">
</canvas>
</body>
</html>
我已经通过以下方式解决了这个问题:
$scope.datasetOverride =
{
backgroundColor: "#4E4EFF",
borderColor: "#2E2E99"
};
<canvas id="bar" class="chart chart-bar"
chart-data="expenseData" chart-labels="labels" chart-series="series" chart-options="chartOptions" chart-dataset-override="datasetOverride">
</canvas>