angular - 如何根据下拉值的变化显示图表数据

Question

我有一个下拉菜单，当我更改下拉菜单中的值时，我必须更改半圆环图的值，如果没有可用数据，我必须显示“无可用数据消息”。

我的代码

HTML

            <mat-form-field >
            <mat-label *ngIf="!room_area_displayInfo">Choose Room </mat-label>
            <mat-label *ngIf="room_area_displayInfo">No Rooms Available</mat-label>
            <mat-select [(ngModel)]="Room" name="room_id" required>
              <mat-option *ngFor="let room of room_list" [value]="room.room_id" (click) = "roomid(Room)">
                {{room.room_name}}
              </mat-option>
            </mat-select>
          </mat-form-field>


           <div class="chart-area" *ngIf = "!currtemp_hum_predisplayInfo">
              <canvas id="daily_temp"></canvas>
          </div>

键入脚本文件

  //Rooms dropdown
   room = new FormControl();
   room_list:any = ["room1", "room-2"];
   Room

   // This method will get the room id  on selecting the room.
   roomid(room_id){
   localStorage.setItem('dash_roomid', room_id);
   this.getRoom_Temp_hum_presInfo();
  }


   Room_Temp_hum_pres:any=[]
   currtemp_hum_predisplayInfo: boolean = false;
   getRoom_Temp_hum_presInfo(){
   this.Service.getRoom_Temp_hum_pres().subscribe(response=>{
      this.Room_Temp_hum_pres = response;
      if(response == null){
        this.currtemp_hum_predisplayInfo = true;
        this.currentTemperature(this.Room_Temp_hum_pres);
     }else{
       this.currtemp_hum_predisplayInfo = false;
      }
     if(this.currtemp_hum_predisplayInfo == false){
      this.currentTemperature(this.Room_Temp_hum_pres);
     }



  //Charts starts here.
  chartColors = {
    temperature: '#ff006a',
    humidity   : '#7b00ff',
    airpressure: '#ff00fb',
    themecolor:  'rgba(0, 0, 0, 0.1)'
  };

//Current Temperature Gauge Chart.
 currentTemperature(Room_Temp_hum_pres){
  var daily_temp_data = Room_Temp_hum_pres['temperature'];
  var daily_temp_data_chart = new Chart('daily_temp', {
    type: 'doughnut',
  data: {
      labels: ['Temperature'],
      datasets: [{
          label: 'Temperature',
          data: [daily_temp_data, daily_temp_data+25],
          backgroundColor: [this.chartColors.temperature, this.chartColors.themecolor],
          borderColor: [this.chartColors.temperature, this.chartColors.themecolor],
          borderWidth: 1
      }]
  },
  options: {
      responsive:true,
      circumference: Math.PI,
      rotation:Math.PI,
      cutoutPercentage:60,
      title: {
          display: true,
          text: daily_temp_data+' °F' ,
          position: 'bottom',
          verticalAlign: 'middle',
          align: 'center',
          y: 20,
          fontSize:25,
          fontColor:'black'
      },
      legend: {
          display:false
      },
      tooltips: {
          enabled: false
    },
      animation: {
          animateScale: true,
          animateRotate: true
      }

  }
});

}

面临的问题：

对于房间名称“room-2”，我有来自 API 的数据，当我将下拉值从“room-2”更改为“room1”时，图表未显示哪个正确。但是，当我们从“room1”更改为“room-2”时，图表必须显示但不显示，如果我双击则只有图表显示，但一键图表不显示，当我打印时控制台上的响应 响应仅在第一次打印。

我不知道我错过了什么。

标签： angulartypescriptchart.js