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

Question

我试图在我的 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.

Answer 1

你的代码对我有用。

Here 是一个有效的 Stackblitz。

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

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

Line Charts color all greyed out (ng2-charts)

angular

chart.js

ng2-charts