如何将Highcharts多窗格图表的完整悬浮tooltip内容展示到外部div

第一步：新增页面容器 #

先加自定义展示区域和图表容器的HTML结构：

<div id="custom-tooltip" style="padding: 10px; border: 1px solid #e5e7eb; border-radius: 4px; margin-bottom: 12px; min-height: 42px; line-height: 24px;"></div>
<div id="container" style="height: 800px; width: 100%;"></div>

第二步：修改Highcharts配置逻辑 #

核心实现逻辑：

• 监听图表鼠标移动事件，判断当前悬浮的窗格（yAxis）
• 获取当前x轴坐标对应下，该窗格内所有系列的点数据
• 拼接带图例颜色的格式化内容，写入上方自定义容器
  修改后的完整JS代码如下：

Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlcv.json', 
function(data) {
  // split the data set into ohlc and volume
  var ohlc = [],
  volume = [],
  volume2 = [],
  dataLength = data.length,
  // set the allowed units for data grouping
  groupingUnits = [
    [
      'week', // unit name
      [1] // allowed multiples
    ],
    [
      'month',
      [1, 2, 3, 4, 6]
    ]
  ],
  i = 0;
  for (i; i < dataLength; i += 1) {
    ohlc.push([
      data[i][0], // the date
      data[i][1], // open
      data[i][2], // high
      data[i][3], // low
      data[i][4] // close
    ]);
    volume.push([
      data[i][0], // the date
      data[i][5] // the volume
    ]);
    volume2.push([
      data[i][0], // the date
      data[i][5] // the volume
    ]);
  }
  // create the chart
  Highcharts.stockChart('container', {
    chart: {
      events: {
        mousemove: function (e) {
          const chart = this;
          const customTooltip = document.getElementById('custom-tooltip');
          let activeYAxis = null;
          // 匹配当前鼠标悬浮的窗格（yAxis）
          chart.yAxis.forEach(axis => {
            if (
              e.chartY >= axis.top && 
              e.chartY <= axis.top + axis.height
            ) {
              activeYAxis = axis;
            }
          });
          if (!activeYAxis) {
            customTooltip.innerHTML = '请悬浮到图表窗格查看数据';
            return;
          }
          // 获取当前x轴对应的值
          const xVal = chart.xAxis[0].toValue(e.chartX);
          let tooltipContent = `<strong>${Highcharts.dateFormat('%Y-%m-%d', xVal)}</strong><br/>`;
          // 遍历当前yAxis下的所有系列，获取对应点数据
          activeYAxis.series.forEach(series => {
            if (!series.visible) return;
            const point = series.searchPoint(e, true);
            if (point) {
              // 拼接带图例颜色的内容
              tooltipContent += `
                <span style="display:inline-block;width:12px;height:12px;background:${series.color};margin-right:6px;border-radius:2px;"></span>
                ${series.name}: 
                ${series.type === 'candlestick' ? 
                  `Open ${point.open} / High ${point.high} / Low ${point.low} / Close ${point.close}` : 
                  point.y
                }<br/>
              `;
            }
          });
          customTooltip.innerHTML = tooltipContent;
        },
        // 鼠标离开图表时重置内容
        mouseout: function () {
          document.getElementById('custom-tooltip').innerHTML = '请悬浮到图表窗格查看数据';
        }
      }
    },
    title: {
      text: 'AAPL Historical'
    },
    yAxis: [{
            labels: {
                align: 'right',
                x: -3
            },
            title: {
                text: 'OHLC'
            },
            height: '33%',
            lineWidth: 2,
            id: '0',
        }, {
            labels: {
                align: 'right',
                x: -3
            },
            title: {
                text: 'Volume'
            },
            top: '33%',
            height: '33%',
            offset: 0,
            lineWidth: 2,
            id: '1',
        }, {
            labels: {
                align: 'right',
                x: -3
            },
            title: {
                text: 'Volume 123'
            },
            top: '66%',
            height: '33%',
            offset: 0,
            lineWidth: 2,
            id: '2'
        },{
            opposite:false,
            labels: {
                align: 'right',
                x: -3
            },
            title: {
                text: 'second AAPL'
            },
            height: '33%',
            offset: 0,
            lineWidth: 2,
            id: '3'
        }],
    xAxis: [{
            offset: -4,
      lineWidth: 2
    }],
    legend: {
      enabled: true
    },
    tooltip: {
      split: true
    },
    series: [{
            type: 'candlestick',
            name: 'AAPL',
            data: ohlc,
            yAxis: 0
        }, {
            type: 'column',
            name: 'Volume',
            data: volume,
            yAxis: 1,
        }, {
            type: 'column',
            name: 'Volume123',
            data: volume,
            yAxis: 2,
        }, {
            type: 'spline',
            name: 'second AAPL',
            data: ohlc.map(item => [item[0], item[4]]),
            yAxis: 3,
        }]
  });
});

逻辑说明 #

• 鼠标在图表上移动时，会先通过鼠标Y坐标匹配当前所属的yAxis范围，识别当前悬浮的窗格
• 自动适配不同系列类型的数值展示，蜡烛图会完整展示OHLC四个值，普通折线/柱形展示y轴数值
• 每个条目前的色块和对应系列图例颜色完全一致，格式符合「系列名:数值」的要求
• 鼠标离开图表时自定义区域会重置为提示文字，避免残留无效数据

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