angular - 折线图颜色全部变灰（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。

标签： angularchart.jsng2-charts

Answer 1

你的代码对我有用。

这是一个有效的 Stackblitz。

我认为您应该查看此处的安装以获取解决方案。