Question

我在仪表板上为 LineChart 开发了功能，如果数据静态功能可以工作，但是我动态地使用数据！我如何在LineChart中动态使用数据，我使用Angular 5 ------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------- file.ts：

public lines: PieChartData[];
public lineChartData: Array<any> = [];
public lineChartLabels: Array<any> = [];
  public lineChartOptions: any = {
    responsive: true
  };
  public lineChartColors: Array<any> = [
    { // grey
      backgroundColor: 'rgba(143,108,99,0.2)',
      borderColor: 'rgba(143,108,99,1)',
      pointBackgroundColor: 'rgba(143,108,99,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(143,108,99,0.8)'
    },
    { // dark grey
      backgroundColor: 'rgba(45,92,138,0.2)',
      borderColor: 'rgba(45,92,138,1)',
      pointBackgroundColor: 'rgba(45,92,138,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(45,92,138,1)'
    },
    { // 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)'
    }
  ];
  public lineChartLegend: boolean = true;
  public lineChartType: string = 'line';

constructor(private _ticketService: TicketService, private http: HttpClient,
    private _dashbordService: DashbordService, private _userService: UserService) { }

 async ngOnInit() {

    let id = localStorage.getItem('userId');
this.lines = await this._dashbordService.getLine(id, 1);
    for (var k = 0; k < this.lines.length; k++) {
      this.lineChartLabels.push(this.lines[k].x);
      this.lineChartData.push(this.lines[k].y);
    }

file.html：

<div class="ibox-body" *ngIf="lines">
          <div style="display: block;">
            <canvas baseChart height="120"
                    [datasets]="lineChartData" 
                    [labels]="lineChartLabels" 
                    [options]="lineChartOptions"
                    [colors]="lineChartColors"
                    [legend]="lineChartLegend"
                    [chartType]="lineChartType"
                    (chartHover)="chartHovered($event)"
                    (chartClick)="chartClicked($event)"></canvas>
          </div>
        </div>

Answer 1

您的ngIf等待行不为null，但是在填充数据集时“ lines”已经具有值。在数据集准备就绪之前，将创建图表。尝试

<div class="ibox-body" *ngIf="lineChartData">
      <div style="display: block;">
        <canvas baseChart height="120"
                [datasets]="lineChartData" 
                [labels]="lineChartLabels" 
                [options]="lineChartOptions"
                [colors]="lineChartColors"
                [legend]="lineChartLegend"
                [chartType]="lineChartType"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"></canvas>
      </div>
    </div>

如果这不起作用，是否可以发布用于获取数据的服务功能？

如何在LineChart.js中动态使用数据

1 个答案: