Линейные диаграммы окрашивают все в серый цвет (ng2-диаграммы) - PullRequest
Новая
       85

Линейные диаграммы окрашивают все в серый цвет (ng2-диаграммы)

1 голос
/ 11 ноября 2019

Я пытаюсь поместить цвета в свои 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)'
    }

  ];

Данные поступают (формы диаграмм)правильно, но я не получаю цвета. Может ли кто-нибудь помочь мне здесь. ТИА.

1 Ответ

1 голос
/ 13 ноября 2019

Ваш код работает на меня.

Здесь - это рабочий Stackblitz.

Я думаю, вам следует взглянуть на установку здесь , чтобы получить решение.

...