Wie einfarbige Balken in einem Balkendiagramm mit eckigen Diagrammen angezeigt werden
Ich verwende Angular-Chart (basierend auf chart.js), um einige Balkendiagramme zu erstellen, und habe Probleme, das gewünschte Bar-Styling zu erhalten. Ich möchte, dass die Balken wie folgt einfarbig sind:
Aber ich kann nicht herausfinden, wie ich das Alpha entfernen kann, das chart.js standardmäßig hinzufügt:
Meine HTML sieht so aus:
<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>
Und das 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]]
}
}]);
Hier ist ein Plunker, der das demonstriert: Plunker
Ich habe viele Informationen über die Verwendung der rgba-Notation (die mir aus irgendeinem Grund die falschen Farben verleiht) und von fillColor (die ich überhaupt nicht zum Arbeiten bringen kann) gefunden. Es ist schwer zu sagen, welche Informationen für Version 1 oder 2 von chart.js vorliegen.
Jede Hilfe wäre dankbar.