Angular中Chart.js 2.9.4自定义tooltip及修复位置偏移问题

1 优先推荐方案（无需自定义tooltip，无定位问题） #

如果仅需要给portfolio数值加粗，不需要完全重构tooltip结构，直接开启自带tooltip的HTML渲染支持即可，完全避免自定义定位的偏移问题：

• 配置项中开启tooltips.enableHTML = true
• 在tooltips.callbacks.label回调中判断当前数据集是否为portfolio，给对应数值包裹加粗标签
  示例代码：

import { Component } from '@angular/core';
import { ChartOptions } from 'chart.js';

@Component({
  template: `
  <canvas baseChart 
    [datasets]="chartDatasets"
    [labels]="chartLabels"
    [options]="chartOptions"
    chartType="line">
  </canvas>
  `
})
export class ChartComponent {
  public chartOptions: ChartOptions = {
    tooltips: {
      enableHTML: true, // 开启HTML渲染支持
      callbacks: {
        label: (tooltipItem, data) => {
          const datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
          const value = tooltipItem.value;
          // 匹配portfolio数据集，加粗数值
          if (datasetLabel.toLowerCase() === 'portfolio') {
            return `${datasetLabel}: <b>${value}</b>`;
          }
          return `${datasetLabel}: ${value}`;
        }
      }
    }
  };

  // 其他图表配置省略
}

2 自定义HTML tooltip偏移问题修复 #

如果必须使用自定义HTML tooltip，偏移到左下角是因为没有正确计算canvas元素在页面中的位置偏移，修复步骤如下：

• 组件模板中提前声明自定义tooltip容器，设置position: absolute
• 在custom回调中先获取canvas的实际位置，再叠加tooltip的光标偏移量，同时计入页面滚动偏移
• Angular环境需要手动触发变更检测，保证位置更新生效
  示例代码：
  模板部分：

<!-- 自定义tooltip容器 -->
<div #customTooltip class="custom-tooltip" style="
  position: absolute;
  opacity: 0;
  background: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  pointer-events: none;
  z-index: 999;
"></div>

<canvas baseChart 
  [datasets]="chartDatasets"
  [labels]="chartLabels"
  [options]="chartOptions"
  chartType="line">
</canvas>

组件逻辑部分：

import { Component, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';
import { ChartOptions } from 'chart.js';

@Component({
  // 组件配置省略
})
export class ChartComponent {
  @ViewChild('customTooltip') customTooltip: ElementRef;

  constructor(private cdr: ChangeDetectorRef) {}

  public chartOptions: ChartOptions = {
    tooltips: {
      enabled: false, // 关闭默认tooltip
      custom: (tooltipModel) => {
        const tooltipEl = this.customTooltip.nativeElement;
        // 隐藏tooltip逻辑
        if (tooltipModel.opacity === 0) {
          tooltipEl.style.opacity = '0';
          this.cdr.detectChanges();
          return;
        }
        // 渲染内容，加粗portfolio数值
        let content = '';
        tooltipModel.dataPoints.forEach(point => {
          const label = point.dataset.label;
          const value = point.value;
          if (label.toLowerCase() === 'portfolio') {
            content += `<div>${label}: <b>${value}</b></div>`;
          } else {
            content += `<div>${label}: ${value}</div>`;
          }
        });
        tooltipEl.innerHTML = content;
        // 计算正确位置，修复偏移
        const canvasRect = point.chart.canvas.getBoundingClientRect();
        tooltipEl.style.opacity = '1';
        tooltipEl.style.left = `${canvasRect.left + window.pageXOffset + tooltipModel.caretX}px`;
        tooltipEl.style.top = `${canvasRect.top + window.pageYOffset + tooltipModel.caretY}px`;
        // 触发Angular变更检测
        this.cdr.detectChanges();
      }
    }
  };
}

注意事项 #

• 不要混用Chart.js 3.x版本的API，2.9.4版本的tooltip回调参数结构、配置项名称和3.x存在差异
• 自定义tooltip的容器不要放在有overflow: hidden属性的父元素内，否则会被裁切

内容的提问来源于stack exchange，提问作者Burçin Ezgi Erdal