как отобразить данные графика на основе изменения выпадающего значения - PullRequest
Новая
       12

как отобразить данные графика на основе изменения выпадающего значения

0 голосов
/ 20 апреля 2020

У меня есть раскрывающийся список, когда я изменяю значение в раскрывающемся списке, мне необходимо изменить значение половины кольцевой диаграммы. Если нет доступных данных, я должен отобразить «Нет доступных данных».

Мой код

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», диаграмма должна отображаться, но она не отображается. Если я сделаю двойной щелчок, то будет отображаться только диаграмма, но диаграмма с одним щелчком не отображается, когда я печатаю ответ на консоли ответ печатается только в первый раз.

Не знаю, где я пропустил.

...