我的第二张图表没有显示值

时间:2017-04-20 16:17:38

标签: html angular typescript

我的问题是我正在创建一个包含多个图表的应用。第一个工作正常,第二个工作正常,如果第一个没有(评论),但当我想要显示两者时,只有第一个显示结果,第二个只显示轴。

这是我的代码:

app.ts

import {Component, OnInit, ViewChild} from "@angular/core";
import { BaseChartDirective, ChartsModule } from 'ng2-charts';
import {DaterangepickerConfig} from "ng2-daterangepicker";

export class ProtectedComponent implements OnInit  {
@ViewChild(BaseChartDirective) chart: BaseChartDirective;
@ViewChild(BaseChartDirective) chart2: BaseChartDirective;

...

this.barChartData1 = [
    {data: this.vector1, label: 'Label 1', type:"bar"},
    {data: this.vector2, label: 'Label 2', type:"bar"},
];

this.barChartLabels1 = this.barChartLabelsSelected1.slice(a - b);

setTimeout(() => {
    if (this.chart && this.chart.chart && this.chart.chart.config) {
        this.chart.chart.config.data.labels = this.barChartLabels1;
        this.chart.chart.update();
        }
      });


 this.barChartData2 = [
        {data: this.vector3, label: 'Label 3', type:"bar"},
        {data: this.vector4, label: 'Label 4', type:"bar"},
 ];

 this.barChartLabels2 = this.barChartLabelsSelected2.slice(a - b);

 setTimeout(() => {
     if (this.chart2 && this.chart2.chart && this.chart2.chart.config) {
         this.chart2.chart.config.data.labels = this.barChartLabels2;
         this.chart2.chart.update();
         }
       });
}

app.html

<div class="row">
 <div class="col-md-6 col-sm-6">
  <div class="portlet light ">
   <div style="display: block">
    <canvas baseChart
        [datasets]="barChartData1"
        [labels]="barChartLabels1"                   
        [options]="barChartOptions"                 
        [colors]="lineChartColors"
        [legend]="barChartLegend"
        [chartType]="barChartType"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)"></canvas>
    </div>
   </div>
  </div>
 </div>

...

<div class="row">
 <div class="col-md-6 col-sm-6">
  <div class="portlet light ">
   <div style="display: block">
    <canvas baseChart
        [datasets]="barChartData2"
        [labels]="barChartLabels2"                   
        [options]="barChartOptions"                 
        [colors]="lineChartColors"
        [legend]="barChartLegend"
        [chartType]="barChartType"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)"></canvas>
    </div>
   </div>
  </div>
 </div>

barChartData1和barChartData2以及barChartLabels1和barChartLabels2的值是正确的,我已经检查过了。如前所述,如果我在html中评论第一个图表,则第二个图表正确显示,如果两个图表都处于活动状态,则只显示第一个图表。

0 个答案:

没有答案