Chart.js canvas in Angular 6 is showing previous chart on mouse hover over the canvas

问题

I am trying to show multiple types of charts by giving user the option to select the type of chart he/she is interested in viewing.

User can select the type of chart from the following HTML radio group code.

<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>

The changes are reflected in the "chartType" variable as when I am printing the value in my typescript file, it is showing the exact value as mentioned as value in input tag.

---

Even the charts are also changing as per requirements and I am getting the charts based on the user input.

But when I hover the mouse over the chart, it is flickering and showing the other charts also mostly the previously clicked charts.

---

Following is my Typescript file:

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
            }
          }]
        }
      }
    });
  }

}

---

Note: I have tried calling destroy method of the chart object as mentioned in various other answers, but it doesn't work here as my chart object is an array and I am using Angular 6. I have used this approach as I knew this one only. If there is any other approach then please mention that also.

Thanks in advance and please help me with the best possible way, mentioning what I did wrong and what I should do in order to make it correct.

来源：https://stackoverflow.com/questions/52703847/chart-js-canvas-in-angular-6-is-showing-previous-chart-on-mouse-hover-over-the-c