Angular 角度：如何使用动态值（arry）在chartjs中显示图形

我试图使用chartJS-2显示包含用户活动数组的图形，但显示不正确：

从'@angular/core'导入{Component，OnInit，Input}；
从'chart.js'导入{ChartOptions，ChartType，ChartDataSets}；
从“chartjs plugin datalabels”导入*作为pluginDataLabels；
从“ng2图表”导入{Label}；
从'src/app/iblink point'导入{IblinkPoint}；
从'src/app/blinking/openweb.service'导入{OpenWebService}；
@组成部分({
选择器：“应用程序图形”，
templateUrl:'./graph.component.html'，
样式URL:['./graph.component.scss']
})
导出类GraphComponent实现OnInit{
公共条形图选项：图表选项={
回答：是的，
//我们使用这些空结构作为动态主题化的占位符。
比例：{xAxes:[{}]，yAxes:[{}]}，
插件：{
数据标签：{
主持人:"结束",，
对齐：“结束”，
}
}
};
公共barChartType:ChartType='bar'；
公共图表颜色：数组=[
{
背景颜色：“rgb（77,0,77,1）”，
边框颜色：“rgba（77,0,77,1）”，
边界宽度：2，
}
];
公共barChartData:ChartDataSets[]；
公共条形图标签：标签[]；
@Input（）闪烁：IblinkPoint[]；
构造函数（私有openWebService:openWebService）{}
恩戈尼尼特（）{
让arrBlinks=this.openWebService.getBlinkData（）；
让startDateArry:任意[]=[]；
让endDateArry:any[]=[]；
让blinkArry:any[]=[]；
arrBlinks.forEach（元素=>{
blinkArry.push（element.blinkCounter.toString）；
startDateArry.push（element.startDate.getMinutes（）.toString（））；
//控制台日志（startDateArry）；
//push（element.endDate.getHours（））；
});
this.barChartLabels=[startDateArry]；
this.barChartData=[{data:blinkArry，标签：'blinks'}]；
//console.log（this.barChartData）；
//console.log（this.barChartLabels）；
}
}

---

此问题是由此声明引起的

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>

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);
  }
}

相关TS：

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

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);
  }
}

从'@angular/core'导入{Component，OnInit}；
从'chart.js'导入{ChartOptions，ChartType，ChartDataSets}；
从“ng2图表”导入{Label}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
公共条形图选项：图表选项={
回答：是的，
//我们使用这些空结构作为动态主题化的占位符。
比例：{xAxes:[{}]，yAxes:[{}]}，
插件：{
数据标签：{
主持人:"结束",，
对齐：“结束”，
}
}
};
公共条形图标签：标签[]；
公共barChartType:ChartType='bar'；
公共条形图图例=真；
公共条形图插件=[]；
公共barChartData:ChartDataSets[]；
构造函数（）{
}
恩戈尼尼特（）{
让startDateArry:任意[]=[]；
让blinkArry:any[]=[]；
对于（变量i=0；i<7；i++）{
blinkArry.push（Math.round（Math.random（）*100））；
startDaterry.push（Math.round（Math.random（）*100））；
}
this.barChartData=[{data:blinkArry，标签：'blinks'}]；
this.barChartLabels=[startDateArry]；
console.log（'这就是问题！'，this.barChartLabels）；
/*解决方案*/
this.barChartLabels=startDateArry；
console.log（'this is fix！！！'，this.barChartLabels）；
}
}

您可以在中看到这两个语句之间的差异