单击按钮时,ng2-charts无法切换颜色

时间:2018-01-30 19:37:14

标签: angular chart.js ng2-charts

作为标题,我倾向于测试点击按钮是否会导致颜色变化但是它失败了。我打印出颜色对象,它确实按预期更改,但在浏览器中颜色仍未更改。

这是我的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>

0 个答案:

没有答案