如何让Highcharts自动显示最新数据点的Tooltip（无需鼠标悬停）

需求说明 #

已知Highcharts图表默认在鼠标悬停时显示数据点对应的Tooltip，现需实现：

• 页面加载完成后，无需鼠标操作，自动显示最后一个数据点的Tooltip
• 导出图表时，该Tooltip保持显示状态

实现方案 #

通过图表加载事件手动触发Tooltip显示，并确保导出配置支持HTML渲染，具体修改如下：

完整代码 #

// 创建图表
Highcharts.chart('container', {
  exporting: {
    useHTML: true // 确保导出时HTML格式的Tooltip能被渲染
  },
  chart: {
    type: 'spline',
    events: {
      load: function() {
        const chart = this;
        // 获取最后一个数据点的X轴值
        const lastXValue = chart.xAxis[0].dataMax;
        // 收集所有系列中对应最后X值的有效数据点
        const targetPoints = chart.series.map(series => {
          return series.points.find(point => point.x === lastXValue);
        }).filter(point => point); // 过滤掉无数据的点
        
        // 刷新Tooltip，显示目标数据点的信息
        if (targetPoints.length) {
          chart.tooltip.refresh(targetPoints);
        }
      }
    }
  },

  title: {
    text: '山间小屋室内温度'
  },

  subtitle: {
    text: 'Highcharts的拆分式Tooltip让重叠折线系列更易读'
  },

  tooltip: {
    valueSuffix: '°C',
    split: true,
    distance: 30,
    padding: 5
  },

  xAxis: {
    crosshair: {
      enabled: true
    }
  },

  yAxis: {
    title: {
      text: '温度'
    }
  },

  plotOptions: {
    series: {
      lineWidth: 1.5,
      marker: {
        radius: 2
      }
    }
  },

  data: {
    columns: [
      ["时间", 1451616120000, 1451865660000, 1451952060000, 1452038400000, 1452124800000, 1452211200000, 1452297600000, 1452384000000, 1452470400000, 1452556800000, 1452643200000, 1452729600000, 1452816000000, 1452902400000, 1452988800000, 1453075200000, 1453161600000, 1453248000000, 1453334400000, 1453420800000, 1453507200000, 1453593600000, 1453680000000, 1453766400000, 1453852800000, 1453939200000, 1454025600000],
      ["厨房", 5, 4, 5, 9, 6, 15, 19, 14, 6, 5, 6, 6, 15, 18, 15, 6, 6, 6, 6, 6, 6, 6, 16, 10, 6, 6, 6],
      ["客厅", 9, 10, 16, 13, 6, 20, 24, 16, 7, 7, 6, 6, 20, 23, 18, 9, 7, 6, 6, 7, 6, 21, 20, 16, 6, 6, 6],
      ["门厅", 7, 7, 13, 12, 5, 17, 22, 14, 4, 5, 5, 6, 18, 21, 17, 9, 5, 6, 5, 6, 6, 18, 20, 14, 5, 5, 5],
      ["浴室", 7, 7, 13, 12, 5, 17, 22, 14, 4, 5, 5, 6, 18, 21, 17, 9, 5, 6, 5, 6, 6, 18, 20, 14, 5, 5, 5],
      ["卧室1", 6, 19, 19, 10, 5, 15, 21, 14, 6, 6, 5, 5, 17, 21, 16, 6, 5, 5, 5, 5, 5, 17, 18, 13, 5, 5, 5],
      ["卧室2", 7, 19, 19, 9, 5, 11, 19, 15, 6, 5, 6, 6, 16, 19, 17, 8, 9, 6, 5, 6, 5, 17, 19, 14, 6, 6, 6],
      ["储藏室", 6, 6, 5, 5, 6, 6, 6, 5, 5, 6, 6, 5, 6, 6, 6, 6, 6, 6, null, null, 6, 6, 6, 6, 6, 6, 6]
    ]
  }
});

关键说明 #

1. 自动显示Tooltip：在chart.events.load事件中，获取X轴的最大数值（即最后一个数据点的X值），然后遍历所有系列找到对应的数据点，调用chart.tooltip.refresh()方法触发Tooltip显示。
2. 导出时保留Tooltip：保持exporting.useHTML: true配置，因为Highcharts导出HTML元素时会将其包含在导出的图片中，确保Tooltip不会消失。

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