Angular：如何在图表 js 中显示具有动态值（数组）的图形

Question

我正在尝试使用 chartJS-2 来显示包含一系列用户活动的图表，但无法正确显示：

import { Component, OnInit, Input } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import * as pluginDataLabels from 'chartjs-plugin-datalabels';
import { Label } from 'ng2-charts';
import { IblinkPoint } from 'src/app/iblink-point';
import { OpenWebService } from 'src/app/blinking/open-web.service';

@Component({
  selector: 'app-graph',
  templateUrl: './graph.component.html',
  styleUrls: ['./graph.component.scss']
})
export class GraphComponent implements OnInit {
  public barChartOptions: ChartOptions = {
    responsive: true,
    // We use these empty structures as placeholders for dynamic theming.
    scales: { xAxes: [{}], yAxes: [{}] },
    plugins: {
      datalabels: {
        anchor: 'end',
        align: 'end',
      }
    }
  };
  public barChartType: ChartType = 'bar';
  public chartColors: Array<any> = [
    {
      backgroundColor: 'rgb(77, 0, 77, 1)',
      borderColor: 'rgba(77, 0, 77, 1)',
      borderWidth: 2,
    }
  ];

  public barChartData: ChartDataSets[];
  public barChartLabels: Label[];

  @Input() blinks: IblinkPoint[];
  constructor(private openWebService: OpenWebService) { }

  ngOnInit() {
    let arrBlinks = this.openWebService.getBlinkData();
    let startDateArry: any[] = [];
    let endDateArry: any[] = [];
    let blinkArry: any[] = [];
    arrBlinks.forEach(element => {
    blinkArry.push(element.blinkCounter).toString;
    startDateArry.push(element.startDate.getMinutes().toString());
   // console.log(startDateArry);
    // endDateArry.push(element.endDate.getHours());
    });
    this.barChartLabels = [startDateArry];
    this.barChartData = [{ data: blinkArry, label: 'blinks'}];
  //  console.log(this.barChartData);
  //  console.log(this.barChartLabels);
  }

}

<div style="display: block">
  <canvas baseChart
    [datasets]="barChartData"
    [labels]="barChartLabels"
    [chartType]="barChartType"
    [colors]="chartColors">
  </canvas>
</div>

我希望看到一个图表，但它显示的是所有 barChartLables 在一个位置堆叠在一起，并且只有一个 barChartData。 我尝试调试我的代码，但没有发现任何问题。

Answer 1

问题是由这个语句引起的

this.barChartLabels = [startDateArry];

这是当您将数组 startDateArry 作为数组 this.barChartLabels 的第一项插入时；相反，您应该这样做：

this.barChartLabels = startDateArry;

相关HTML：

<div style="display: block;">
  <canvas baseChart 
    [datasets]="barChartData"
    [labels]="barChartLabels"
    [options]="barChartOptions"
    [plugins]="barChartPlugins"
    [legend]="barChartLegend"
    [chartType]="barChartType">
  </canvas>
</div>

相关TS：

import { Component, OnInit } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Label } from 'ng2-charts';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  public barChartOptions: ChartOptions = {
    responsive: true,
    // We use these empty structures as placeholders for dynamic theming.
    scales: { xAxes: [{}], yAxes: [{}] },
    plugins: {
      datalabels: {
        anchor: 'end',
        align: 'end',
      }
    }
  };
  public barChartLabels: Label[];
  public barChartType: ChartType = 'bar';
  public barChartLegend = true;
  public barChartPlugins = [];
  public barChartData: ChartDataSets[];

  constructor() {
  }

  ngOnInit() {
    let startDateArry: any[] = [];
    let blinkArry: any[] = [];

    for (var i = 0; i < 7; i++) {
      blinkArry.push(Math.round(Math.random() * 100));
      startDateArry.push(Math.round(Math.random() * 100));
    }

    this.barChartData = [{ data: blinkArry, label: 'blinks' }];

    this.barChartLabels = [startDateArry];
    console.log('this is the issue!', this.barChartLabels);

    /* SOLUTION */
    this.barChartLabels = startDateArry;
    console.log('this is the fix!!!', this.barChartLabels);
  }
}

您也可以在attached working stackblitz 中看到这两个语句之间的区别