Angular7: отображение данных на всплывающей подсказке, а не наведение курсора на нее с помощью MDBootstrap - PullRequest
Новая
       28

Angular7: отображение данных на всплывающей подсказке, а не наведение курсора на нее с помощью MDBootstrap

1 голос
/ 24 июня 2019

Я сделал круговую диаграмму, используя дизайн материала MDBootstrap, данные, отображаемые на круговой диаграмме, только при наведении, как это только при наведении , но мне нужно показать данные в его разделе или всплывающей подсказке, как это полоска с надписью Я использую угловой 7 и ниже мой код, пожалуйста, отметьте

ЗДЕСЬ мой barchart.component.ts file 

  import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-barchart',
  templateUrl: './barchart.component.html',
  styleUrls: ['./barchart.component.css']
})
export class BarchartComponent implements OnInit {
  public chartType: string = 'pie';

  public chartDatasets: Array<any> = [
    { data: [300, 50, 100, 40, 120], label: 'My First dataset' }
  ];

  public chartLabels: Array<any> = ['Red', 'Green', 'Yellow', 'Grey', 'Dark Grey'];

  public chartColors: Array<any> = [
    {
      backgroundColor: ['#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'],
      hoverBackgroundColor: ['#FF5A5E', '#5AD3D1', '#FFC870', '#A8B3C5', '#616774'],
      borderWidth: 2,
    }
  ];

  public chartOptions: any = {
    responsive: true
  };
  public chartClicked(e: any): void { }
  public chartHovered(e: any): void { }

  constructor() { }

  ngOnInit() {
  }

}

и HTML ФАЙЛ: 

 <div style="display: block; width: 30%;">
  <canvas mdbChart
      [chartType]="chartType"
      [datasets]="chartDatasets"
      [labels]="chartLabels"
      [colors]="chartColors"
      [options]="chartOptions"
      [legend]="true"
      (chartHover)="chartHovered($event)"
      (chartClick)="chartClicked($event)">
  </canvas>
</div>
...