作为标题,我倾向于测试点击按钮是否会导致颜色变化但是它失败了。我打印出颜色对象,它确实按预期更改,但在浏览器中颜色仍未更改。
这是我的component.ts
public currLineChartColor: Array<any> = [
{
borderColor: 'rgba(240,233,80,1)',
pointBackgroundColor: 'rgba(240,233,80,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(0,0,0,0.8)',
fill:false
}
];
public lineChartColors:Array<any> = [
{
borderColor: 'rgba(240,233,80,1)',
pointBackgroundColor: 'rgba(240,233,80,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(0,0,0,0.8)',
fill:false
},
{
borderColor: 'rgba(79,165,185,1)',
pointBackgroundColor: 'rgba(79,165,185,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(0,0,0,0.8)',
fill:false
},
{
borderColor: 'rgba(135,201,123,1)',
pointBackgroundColor: 'rgba(135,201,123,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(0,0,0,0.8)',
fill:false
}
]
public randomize():void {
let r = Math.floor(Math.random()*this.lineChartColors.length);
this.currLineChartColor = [this.lineChartColors[r]];
}
这是我的HTML:
<div style="display: block; width: 400px; height: 400px; float: left;">
<canvas baseChart width = "1" height = "1"
[datasets]="currentDisplayData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[colors]="currLineChartColor"
[legend]="lineChartLegend"
[chartType]="lineChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</canvas>
<button (click)="randomize()">CLICK</button>
</div>