折线图全部变灰(ng2图表)

Question

我试图在两个折线图中(在同一个图表上(添加颜色，但无论我添加什么选项，颜色都保持灰色。我正在动态地获取这些图表中的数据。

HTML:

<div class="lineChart4">
<h4 class="heading" style="text-align:center">Line Chart For Number of Clicks
</h4>
<div style="display: block" >
<canvas baseChart
[datasets]="lineChartData4"
[labels]="lineChartLabels4"
[colors]="lineChartColors"
[chartType]="lineChartType4"
[legend]="lineChartLegend4"
[options]="lineChartOptions4">
<!-- (chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)" -->
</canvas>
</div>

</div>

.ts:

public lineChartLabels4=['','','','',''];
public lineChartData4=[{ data: [0,0,0,0,0], label: '' , lineTension:0, fill: false},
{ data: [0,0,0,0,0], label: '' ,lineTension:0, fill: false}];
public lineChartType4:string='line';
public lineChartLegend4 = true;
public lineChartColors: Color[] = [
{ // grey
backgroundColor: 'rgba(148,159,177,0.2)',
borderColor: 'rgba(148,159,177,1)',
pointBackgroundColor: 'rgba(148,159,177,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
},
{ // red
backgroundColor: 'rgba(255,0,0,0.3)',
borderColor: 'red',
pointBackgroundColor: 'rgba(148,159,177,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
}
];

数据(图表的形状(是正确的，但我没有得到任何颜色。有人能帮我吗。TIA。

Answer 1

您的代码对我有效。

这是一个正在工作的Stacklitz。

我认为你应该看看这里的安装来获得解决方案。