html - 如何从 Chart.js 更改 Angular 7/8 上的工具提示

Question

我在我的应用程序上使用 Angular 和 Chart.js（带有 ng2-charts）。使用条形图，默认情况下，当我单击列时，我会得到一个工具提示，如下所示：

我想更改该工具提示的内部。这是我的代码：

我的条形图.component.html：

<div class="container chart-style">
  <canvas baseChart
          [datasets]="barChartData"
          [labels]="barChartLabels"
          [options]="barChartOptions"
          [legend]="barChartLegend"
          [chartType]="barChartType"
          [options]="barChartTooltip"
          style="height:20rem; width:100rem"
          >
  </canvas>
</div>

和 my-bar-chart.component.ts ：

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-my-bar-chart',
  templateUrl: './my-bar-chart.component.html',
  styleUrls: ['./my-bar-chart.component.css']
})
export class MyBarChartComponent {
  constructor() { }
  public barChartOptions = {
    scaleShowVerticalLines: true,
    responsive: true,
    maintainAspectRatio: false
  };
  public barChartLabels = ['One star', 'Two stars', 'Three stars', 'four stars', 'Five stars'];
  public barChartType = 'bar';
  public barChartLegend = true;
  public barChartData = [
    {data: [28, 39, 42, 19, 8],
    label: 'amount',
    backgroundColor: [
      'rgba(54, 162, 235, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(54, 162, 235, 0.2)',
    ],
    borderWidth: 0,
    hoverBackgroundColor: 'rgba(221, 221, 221, 1)',
    scaleStepWidth: 1,
    pointHoverBorderColor: 'rgba(255,1,2, 1)',
    }
  ];

  public barChartTooltip = //I dont know
}

标签： htmlangularchartschart.js