如何在Angular-Plotly与Plotly.js中自定义箱线图轨迹的悬停文本

我来帮你解决angular-plotly中自定义箱线图hover文本的问题！你想要的按顺序显示测量标题、min、q1、median、q3、max的需求，其实用Plotly原生配置就能搞定，不用复杂操作DOM。下面给你三种可行方案，按推荐程度排序：

1. 直接使用hovertemplate（最推荐） #

这是Plotly官方提供的自定义hover内容的标准方式，针对箱线图，它内置了可直接引用的统计变量，你只需要把这些变量按格式拼到hovertemplate里就行。

代码示例： #

在你的Angular组件中，定义trace时添加hovertemplate属性：

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

@Component({
  selector: 'app-root',
  template: `<plotly-plot [data]="traces" [layout]="layout"></plotly-plot>`
})
export class AppComponent {
  traces = [
    {
      type: 'box',
      y: [12, 15, 18, 22, 25, 28, 30, 33, 35, 40],
      name: '温度测量', // 你的测量标题
      hovertemplate: `测量标题: %{data.name}<br>
min: %{y.min}<br>
q1: %{y.q1}<br>
median: %{y.median}<br>
q3: %{y.q3}<br>
max: %{y.max}<extra></extra>`
      // <extra></extra>用来清除Plotly默认显示的额外冗余信息
    }
  ];

  layout = { title: '自定义hover的箱线图' };
}

为什么之前可能无效？ #

• 你可能没正确引用箱线图专属的统计变量：%{y.min}、%{y.q1}这些是Plotly为箱线图自动计算好的，直接调用即可
• 没加<extra></extra>，导致默认的trace名称等内容还会显示，覆盖你的自定义文本

2. 预计算hovertext + hoverinfo='text' #

如果需要对统计值做额外处理（比如格式化数字、添加单位），可以先自己计算箱线的统计数据，生成自定义hovertext后，设置hoverinfo='text'让Plotly只显示你定义的内容。

代码示例： #

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

@Component({
  selector: 'app-root',
  template: `<plotly-plot [data]="traces" [layout]="layout"></plotly-plot>`
})
export class AppComponent {
  traces = [];

  constructor() {
    // 示例数据
    const yData = [12, 15, 18, 22, 25, 28, 30, 33, 35, 40];
    const measurementName = '温度测量';
    const stats = this.calculateBoxStats(yData);

    this.traces.push({
      type: 'box',
      y: yData,
      name: measurementName,
      hoverinfo: 'text', // 告诉Plotly只显示hovertext内容
      hovertext: `测量标题: ${measurementName}<br>
min: ${stats.min} °C<br>
q1: ${stats.q1} °C<br>
median: ${stats.median} °C<br>
q3: ${stats.q3} °C<br>
max: ${stats.max} °C`
    });
  }

  // 手动计算箱线图的统计值
  private calculateBoxStats(data: number[]) {
    const sorted = [...data].sort((a, b) => a - b);
    const min = sorted[0];
    const max = sorted[sorted.length - 1];
    const median = this.getMedian(sorted);
    const q1 = this.getMedian(sorted.slice(0, Math.floor(sorted.length / 2)));
    const q3 = this.getMedian(sorted.slice(Math.ceil(sorted.length / 2)));
    return { min, q1, median, q3, max };
  }

  private getMedian(arr: number[]) {
    const mid = Math.floor(arr.length / 2);
    return arr.length % 2 !== 0 ? arr[mid] : (arr[mid - 1] + arr[mid]) / 2;
  }

  layout = { title: '预计算hovertext的箱线图' };
}

3. 利用hover事件修改DOM（不推荐，仅作备选） #

如果你已经在使用hover事件获取到了数据，想要修改hover框内容，可以通过操作DOM实现，但这种方法依赖Plotly的DOM结构，版本更新后可能失效，所以优先用前两种方法。

代码示例： #

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

@Component({
  selector: 'app-root',
  template: `<plotly-plot [data]="traces" [layout]="layout" (hover)="hoverTrigger($event)"></plotly-plot>`
})
export class AppComponent {
  traces = [
    {
      type: 'box',
      y: [12, 15, 18, 22, 25, 28, 30, 33, 35, 40],
      name: '温度测量'
    }
  ];

  layout = { title: 'hover事件修改DOM的箱线图' };

  hoverTrigger(event: any) {
    const point = event.points[0];
    // 从event中提取所需统计数据
    const stats = {
      name: point.data.name,
      min: point.y.min,
      q1: point.y.q1,
      median: point.y.median,
      q3: point.y.q3,
      max: point.y.max
    };

    // 等待Plotly生成hover框后再修改DOM，用setTimeout确保DOM已更新
    setTimeout(() => {
      const hoverBox = document.querySelector('.plotly-hover');
      if (hoverBox) {
        hoverBox.innerHTML = `
          <div style="padding: 8px;">
            <div>测量标题: ${stats.name}</div>
            <div>min: ${stats.min}</div>
            <div>q1: ${stats.q1}</div>
            <div>median: ${stats.median}</div>
            <div>q3: ${stats.q3}</div>
            <div>max: ${stats.max}</div>
          </div>
        `;
      }
    }, 0);
  }
}

以上三种方法里，第一种hovertemplate是最简洁、最稳定的，建议优先使用。如果需要更灵活的自定义逻辑，再考虑第二种预计算hovertext的方式。

内容的提问来源于stack exchange，提问作者code_goes_brbrbr