Холст Chart.js в Angular 6 показывает предыдущий график при наведении мыши на холст - PullRequest
Новая
       7

Холст Chart.js в Angular 6 показывает предыдущий график при наведении мыши на холст

0 голосов
/ 08 октября 2018

Я пытаюсь показать несколько типов диаграмм, предоставляя пользователю возможность выбрать тип диаграммы, которую он / она заинтересован в просмотре.

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

Даже диаграммы также меняются в соответствии с требованиями, и я получаю диаграммы на основе пользовательского ввода.

Но когда я наводю указатель мыши на диаграмму, она мерцает и показывает другие диаграммы, в основном также ранее нажатые диаграммы.

Ниже приведен мой файл Typescript: 

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

}

Примечание : я пытался вызвать метод уничтожения объекта диаграммы, как упоминалось в других ответах, но здесь он не работает, поскольку мой объект диаграммы - это массив , а я использую Angular 6. Я использовал этот подход, поскольку знал только этот.Если есть какой-либо другой подход, то, пожалуйста, упомяните это также.

Заранее спасибо и, пожалуйста, помогите мне как можно лучше, упомянув, что я сделал неправильно и что я должен сделать, чтобы исправить это.

...