如何在Angular Highcharts中实现鼠标移动显坐标与悬停提示框

1. 基础依赖准备 #

确保Angular项目已安装highcharts和highcharts-angular依赖，组件中导入Highcharts并定义chartOptions配置对象。

2. 鼠标移动时显示实时指针坐标 #

通过配置十字准线和跟随鼠标的提示框，实现鼠标在图表区域移动时实时显示当前坐标值：

import * as Highcharts from 'highcharts';

export class ChartComponent {
  Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {
    tooltip: {
      followPointer: true, // 提示框跟随鼠标移动
      crosshairs: true, // 启用贯穿XY轴的十字准线
      formatter: function() {
        // 自定义坐标显示格式
        return `X: ${this.x}<br/>Y: ${this.y}`;
      }
    },
    xAxis: {
      type: 'number' // 根据数据类型调整，如datetime、category等
    },
    yAxis: {
      type: 'number'
    },
    series: [{
      type: 'line', // 图表类型，如scatter、column等
      data: [[1, 2], [3, 5], [5, 1], [7, 6]] // 示例数据
    }]
  };
}

关键配置说明：

• followPointer: true：让提示框始终跟随鼠标位置，而非固定在数据点上
• crosshairs: true：在鼠标位置显示十字线，直观对应坐标位置
• formatter：自定义提示内容，清晰展示当前XY坐标值

3. 悬停数据点时展示精准XY数值 #

默认情况下Highcharts已支持悬停点显示数值，可按需自定义提示格式：

tooltip: {
  followPointer: false, // 提示框固定在数据点上（可选）
  crosshairs: true,
  formatter: function() {
    // 展示系列名称+当前点的XY值
    return `<b>${this.series.name}</b><br/>X: ${this.x}<br/>Y: ${this.y}`;
  },
  shared: false // 单数据点单独显示提示框，多系列时设为true可合并同X值的所有系列数据
}

4. 模板中引用图表 #

在组件模板中使用highcharts-chart组件绑定配置：

<highcharts-chart 
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  style="width: 100%; height: 400px; display: block;"
></highcharts-chart>

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