angularjs - بوم Chart.js در Angular 6 هنگام قرار گرفتن ماوس روی بوم، نمودار قبلی را نشان میدهد

من در تلاش هستم تا با دادن گزینهای به کاربر برای انتخاب نوع نموداری که علاقهمند به مشاهده آن است، چند نوع نمودار را نشان دهم.

کاربر میتواند نوع نمودار را از کد گروه رادیویی HTML زیر انتخاب کند.

<form>
 <label class="radio-inline">
  <input type="radio" value="bar" name="optradio" (change)="onchange()"  [(ngModel)]="chartType" checked>Bar Graph
 </label>
 <label class="radio-inline">
  <input type="radio" value="pie" name="optradio" (change)="onchange()" [(ngModel)]="chartType">Pie Chart
 </label>
 <label class="radio-inline">
  <input type="radio" value="line" name="optradio" (change)="onchange()" [(ngModel)]="chartType">Line Graph
 </label>
</form>

این تغییرات در متغیر "chartType" منعکس میشوند، همانطور که وقتی مقدار آن را در فایل تایپاسکریپت خود چاپ میکنم، دقیقا همان مقداری را نشان میدهد که به عنوان value در تگ ورودی ذکر شده است.

حتی نمودارها نیز مطابق با نیازها در حال تغییر هستند و من نمودارها را بر اساس ورودی کاربر دریافت میکنم.

اما وقتی ماوس را روی نمودار میبرم، صفحه چشمک میزند و نمودارهای دیگر را نیز نشان میدهد، عمدتاً نمودارهایی که قبلاً کلیک شده بودند.

در ادامه فایل تایپاسکریپت من آمده است:

import { Component, OnInit } from '@angular/core';
import { LoggerService } from '../../Services/logger.service';
import { HttpService } from '../../Services/http.service';
import { FormsModule } from '@angular/forms';
import { Chart } from 'chart.js';


@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  constructor(private logger: LoggerService, private httpService: HttpService,private formsModule:FormsModule) { }
  private arr: Number[];
  private chartShow:boolean = false;
  private chartType = "bar";
  private chart = [];

  ngOnInit() {
    this.getPeopleCount();
  }

  getPeopleCount() {
    this.httpService.getPeopleCount().subscribe(res => {
      this.arr = res;
      this.chartShow = true;
      this.displayChart();
    });
  }
  onchange(){
    console.log(this.chartType);
    this.getPeopleCount();
  }
  displayChart(){
    this.chart = new Chart('canvas', {
      type: this.chartType,
      data: {
        labels: ["Very Poor", "Poor", "Average", "Good", "Very Good", "Excellent"],
        datasets: [{
          label: 'Number of Feedbacks',
          data: this.arr,
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });
  }

}

توجه: من سعی کردهام متد destroy شیء نمودار را همانطور که در پاسخهای مختلف دیگر ذکر شده، فراخوانی کنم، اما اینجا کار نمیکند چون شیء نمودار من یک آرایه است و من از Angular 6 استفاده میکنم. من این روش را به کار بردهام چون فقط این روش را میدانستم. اگر روش دیگری هم وجود دارد لطفاً آن را نیز ذکر کنید.

پیشاپیش از شما متشکرم و لطفاً با بهترین راه ممکن به من کمک کنید، ذکر کنید که چه اشتباهی کردم و چه کاری باید انجام دهم تا آن را درست کنم.