折线图颜色全部变灰（ng2-charts）答案

【问题标题】：Line Charts color all greyed out (ng2-charts)折线图颜色全部变灰（ng2-charts）
【发布时间】：2020-03-06 23:50:24
【问题描述】：

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

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。

【问题讨论】：

标签： angular chart.js ng2-charts

【解决方案1】：

您的代码对我有用。

Here 是一个有效的 Stackblitz。

我认为您应该查看安装here 以获得解决方案。

【讨论】：