我已将ng2-charts添加到我的项目中并显示2个图表-甜甜圈和条形图。自从我添加以来，两者都显示为灰色
<base-chart class="chart"
[colors]="chartColors"
...
</base-chart>
到component.template.html和
public chartColors:Array<any> =[
{
fillColor:'rgba(225,10,24,0.2)',
strokeColor:'rgba(11,255,20,1)',
pointColor:'rgba(111,200,200,1)',
pointStrokeColor:'#fff',
pointHighlightFill:'#fff',
pointHighlightStroke:'rgba(200,100,10,0.8)'
}, ... (3x)
到 component.ts
是否需要导入其他任何软件包以更改颜色或设置是否错误？Chromes html inspector显示以下呈现的html输出
ng-reflect-colors="[object Object],[object Object],[object Object]"
您应该这样做：
public chartColors: Array<any> = [
{ // first color
backgroundColor: 'rgba(225,10,24,0.2)',
borderColor: 'rgba(225,10,24,0.2)',
pointBackgroundColor: 'rgba(225,10,24,0.2)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(225,10,24,0.2)'
},
{ // second color
backgroundColor: 'rgba(225,10,24,0.2)',
borderColor: 'rgba(225,10,24,0.2)',
pointBackgroundColor: 'rgba(225,10,24,0.2)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(225,10,24,0.2)'
}];
默认情况下设置为灰色，这意味着由于属性名称错误，您的颜色选项不起作用。
这里有一个示例，说明如何调用颜色属性：
@UPDATE：
如果只需要更新backgroundColor而不是其他任何内容，那么下面的代码也将起作用。
public chartColors: Array<any> = [
{ // all colors in order
backgroundColor: ['#d13537', '#b000b5', '#coffee', ...]
}
]
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句