我正在使用 angular-chart(基于 chart.js)创建一些条形图，但无法获得我想要的条形样式。我希望条形图是这样的纯色:
但我不知道如何摆脱 chart.js 默认添加的 alpha:
我的 html 看起来像这样:
<body ng-app="myApp" ng-controller="myController as ctrl">
<canvas id="outreach" class="chart chart-bar"
chart-labels="ctrl.socialChart.labels"
chart-data="ctrl.socialChart.data"
chart-series="ctrl.socialChart.series"
chart-colors="ctrl.socialChart.colors"
chart-options="ctrl.socialChart.options"></canvas>
</body>
和 javascript:
angular.module('myApp', ['chart.js'])
.controller('myController', [function() {
var ctrl = this;
ctrl.socialChart = {
options: {
legend: {
display: true
}
},
labels: ['2012'],
series: ['FACEBOOK', 'GOOGLE', 'TWITTER', 'INSTAGRAM'],
// colors: ['rgba(237, 64, 42, 1)', 'rgba(240, 171, 5, 1)', 'rgba(160, 180, 33, 1)', 'rgba(0, 163, 159, 1)'],
colors: ['#ED402A', '#F0AB05', '#A0B421', '#00A39F'],
data: [[1178], [652], [1004], [838]]
}
}]);
这是一个 Plunker 演示:Plunker
我发现了很多关于使用 rgba 表示法(出于某种原因，这完全给了我错误的颜色)和 fillColor(我根本无法工作)的信息。很难说出 chart.js 版本 1 或版本 2 的信息是什么。
如有任何帮助，我们将不胜感激。
最佳答案
您可以使用chart-dataset-override="datasetOverride"
HTML
<div ng-controller="BarCtrl">
<canvas id="bar" class="chart chart-bar"
chart-data="data"
chart-labels="labels"
chart-series="series"
chart-dataset-override="datasetOverride"></canvas>
</div>
Controller
ctrl.datasetOverride = [{
fill: true,
backgroundColor: [
"#ED402A",
"#36A2EB",
"#FFCE56"
]
}, {
fill: true,
backgroundColor: [
"#F0AB05",
"#36A2EB",
"#FFCE56"
]
}, {
fill: true,
backgroundColor: [
"#A0B421",
"#36A2EB",
"#FFCE56"
]
}, {
fill: true,
backgroundColor: [
"#00A39F",
"#36A2EB",
"#FFCE56"
]
},
];
关于javascript - 如何在 Angular 图表条形图中使用纯色条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40407982/