如何在角度图表条形图中使用纯色条 [英] How to have solid colored bars in angular-chart bar chart
问题描述
我正在使用 angular-chart(基于 chart.js)来创建一些条形图，但在获得我想要的条形样式时遇到了麻烦.我希望条形是这样的纯色:
但我不知道如何去掉chart.js默认添加的alpha:
我的 html 看起来像这样:
<canvas id="outreach" class="chart chart-bar"图表标签=ctrl.socialChart.labels"图表数据=ctrl.socialChart.data"图表系列="ctrl.socialChart.series"图表颜色=ctrl.socialChart.colors"chart-options="ctrl.socialChart.options"></canvas>还有 javascript:
angular.module('myApp', ['chart.js']).controller('myController', [function() {var ctrl = 这个；ctrl.socialChart = {选项: {传奇: {显示:真}},标签:['2012']，系列:['FACEBOOK'、'GOOGLE'、'TWITTER'、'INSTAGRAM']、//颜色:['rgba(237, 64, 42, 1)', 'rgba(240, 171, 5, 1)', 'rgba(160, 180, 33, 1)', 'rgba(0, 163), 159, 1)'],颜色:['#ED402A'、'#F0AB05'、'#A0B421'、'#00A39F']、数据:[[1178]、[652]、[1004]、[838]]}}]);这是一个演示它的 Plunker:Plunker
我发现了很多关于使用 rgba 表示法(出于某种原因给我的颜色完全错误)和 fillColor(我根本无法使用)的信息.很难说 chart.js 的第 1 版或第 2 版的信息是什么.
任何帮助将不胜感激.
您可以使用 chart-dataset-override="datasetOverride"
HTML
<canvas id="bar" class="chart chart-bar"图表数据=数据"图表标签=标签"图表系列=系列"chart-dataset-override="datasetOverride"></canvas>控制器
ctrl.datasetOverride = [{填充:真实，背景颜色: ["#ED402A","#36A2EB",#FFCE56"]}, {填充:真实，背景颜色: ["#F0AB05","#36A2EB",#FFCE56"]}, {填充:真实，背景颜色: ["#A0B421","#36A2EB",#FFCE56"]}, {填充:真实，背景颜色: ["#00A39F","#36A2EB",#FFCE56"]},];I'm using angular-chart (based on chart.js) to create some bar charts and am having trouble getting the bar styling I want. I want the bars to be solid colors like this:
But I can't figure out how to get rid of the alpha that chart.js adds by default:
My html looks like this:
<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>
And the 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]]
}
}]);
Here's a Plunker demonstrating it: Plunker
I've found lots of information about using rgba notation (which for some reason gives me the wrong colors altogether) and fillColor (which I can't get working at all). It's hard to tell what info is for version 1 or 2 of chart.js.
Any help would be appreciated.
You can use 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"
]
},
];
这篇关于如何在角度图表条形图中使用纯色条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
