缩放:min属性已更改时,图表不会更新

时间:2019-03-27 11:11:09

标签: javascript angular charts chartjs-plugin-zoom

首先,我在Angular 7中工作,并且得到了以下“应用程序”: enter image description here

顶部的栏是日期过滤器,它使您有机会选择“发件人”日(葡萄牙语中的De)和“发件人”日(葡萄牙语中的Até)。通过选择这些天,假定该图形仅显示相应的时间间隔,例如:日2019/01/01至2019/02/02。就那么简单。因此,现在我将展示用于将数据从条形组件(filtro-data.component)传递到父级(charts-report.component),然后从父级传递到许多图形的逻辑,但是现在我们仅将使用({dimensao-component)。我只使用de From输入将其缩放:min。

filtro-data. component.ts

export class FiltroDataComponent implements OnInit {

  dateDe : any;
  dateAte : any;

  @Output() dateDeEvent = new EventEmitter<string>()

  constructor() { }

  ngOnInit() { }

  sendMessage() {
    this.dateDeEvent.emit(this.dateDe);
  }
}

filtro-data.component.html

<input id="dateDe" name="dateDe" [(ngModel)]="dateDe" type="date" required>
<input type="date" id="dateAte" name="dateAte" [(ngModel)]="dateAte" required>
<button (click) = "sendMessage()">Aplicar</button>~

所以在这里,我准备了输入中的数据,并将其发送给父级。这是父母:

charts-report.component.ts

export class ChartsReportComponent implements OnInit {
  @ViewChild(DimensaoComponent) dimensaoC: DimensaoComponent; //to import the component dimensao

  constructor(private formbulider: FormBuilder, private route: ActivatedRoute) {  }

  dateDe: any;

  receiveMessage($event) {
    this.dateDe = $event;
    this.dimensaoC.updateChart() //this will make sense
  }

  ngOnInit() {}
}

charts-report.component.html

<app-filtro-data (dateDeEvent)="receiveMessage($event)"></app-filtro-data>
 <app-dimensao [dateDe]="dateDe"></app-dimensao>

我将所有这些信息发送到我的组件dimensao ...

dimensao.component.ts

@Input() dateDe : any;

(...)
        time: {
            unit: 'day',
            min: this.dateDe
        }
(...)
   updateChart(){
    this.LineChart.update();
  }   

我做了一些“测试”,并且dimensao组件在filter-date.component中收到了我选择的日期,所以一切都很好...但是当我单击按钮“ Aplicar”时,图形就不会更新,即使具有执行此功能的功能(请参阅Charts-report.component中的receiveMessage)...我已经尝试了很多事情,但是没有任何效果。你知道我能做什么吗?我只希望图形以“ min”中的新数据更新。谢谢。

0 个答案:

没有答案