javascript - Angular7：在饼图工具提示上显示数据，而不是使用 MDBootstrap 将鼠标悬停在上面

Question

我使用MDBootstrap材料设计制作了一个饼图，饼图上显示的数据仅在悬停时像这样悬停， 但我需要在其部分或工具提示上显示数据7及以下是我的代码，请检查

这是我的barchart.component.ts文件

  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>

标签： javascriptangular7mdbootstrap