如何更改 Angular-Chart.js 的颜色 [英] How to change colours for Angular-Chart.js

问题描述

我使用 Angular-Chart.js(AngularJS Chart.js 版本)来创建条形图.图表正在处理颜色以外的选项.

即使我设置了它们，在文档中，它们也会保持灰色.

<canvas class="chart chart-bar"数据=bilans.data"标签=bilans.labels"系列=bilans.series"选项="{scaleShowHorizo​​ntalLines: 真,scaleShowVerticalLines: 假,tooltipTemplate: '<%= value %>$',响应:真实}"颜色="{fillColor: 'rgba(47, 132, 71, 0.8)',strokeColor: 'rgba(47, 132, 71, 0.8)',highlightFill: 'rgba(47, 132, 71, 0.8)',highlightStroke: 'rgba(47, 132, 71, 0.8)'}"></画布>

实际上，选项有效，但颜色无效.我做错了什么吗?

解决方案

你应该将 colours 对象声明为一个数组

颜色":[{fillColor: 'rgba(47, 132, 71, 0.8)',strokeColor: 'rgba(47, 132, 71, 0.8)',highlightFill: 'rgba(47, 132, 71, 0.8)',highlightStroke: 'rgba(47, 132, 71, 0.8)'}];

工作 Plunkr

有关详细信息，请参阅这篇文章/这个也是.

<小时>

对于较新的版本，请参阅 eli0tt 的答案，因为参数名称已更改.

I use Angular-Chart.js (the AngularJS Chart.js version) to create a bar chart. The Chart is working with the options except for the colours.

Even if I set them it is indicated in the documentation, they stay grey.

<div class="graph-display" ng-controller="chartController">
    <canvas class="chart chart-bar"
    data="bilans.data"
    labels="bilans.labels"
    series="bilans.series"
    options="{
        scaleShowHorizontalLines: true,
        scaleShowVerticalLines: false,
        tooltipTemplate: '<%= value %> $',
        responsive: true
    }"
    colours="{
    fillColor: 'rgba(47, 132, 71, 0.8)',
    strokeColor: 'rgba(47, 132, 71, 0.8)',
    highlightFill: 'rgba(47, 132, 71, 0.8)',
    highlightStroke: 'rgba(47, 132, 71, 0.8)'
    }"
    ></canvas>
</div>

Actually, the options are working but the colours are not. Am I doing something wrong?

解决方案

Your should declare colours object as an array

"colours": [{
    fillColor: 'rgba(47, 132, 71, 0.8)',
    strokeColor: 'rgba(47, 132, 71, 0.8)',
    highlightFill: 'rgba(47, 132, 71, 0.8)',
    highlightStroke: 'rgba(47, 132, 71, 0.8)'
}];

Working Plunkr

For more info refer this post / this too.

---

For newer versions, see eli0tt's answer, as the parameter names have changed.

这篇关于如何更改 Angular-Chart.js 的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！