使用Chart.js实现折线图悬停显X轴最近点、垂直标线及固定tooltip的问询

你的两个需求均可通过Chart.js原生能力实现，无需引入额外第三方插件，仅需调整配置并添加少量自定义逻辑即可，修改方案如下：

1. 实现按X轴鼠标位置匹配最近点 #

修改交互配置，将原有的hover配置替换为全局interactions配置，设置匹配规则为X轴方向、非交点触发、取最近索引：

options: {
  // 原有配置保留，新增/替换以下内容
  interaction: {
    mode: 'index',
    axis: 'x',
    intersect: false
  },
}

该配置下只要鼠标在图表绘图区域内移动，就会自动定位到X坐标对应的最近时间点的数据，无需鼠标精准触碰折线点。

2. 实现垂直指示线+左上角固定Tooltip #

• 垂直指示线可以通过注册一个极简的自定义内联插件实现，无需额外安装依赖
• 固定Tooltip位置可以通过覆写Tooltip的position配置实现，直接指定Tooltip固定渲染在左上角位置

修正原配置拼写错误（pasing改为parsing）后的完整可运行配置如下：

// 注册自定义垂直指示线插件
Chart.register({
  id: 'verticalIndicator',
  afterDraw: (chart) => {
    if (chart.tooltip._active && chart.tooltip._active.length) {
      const ctx = chart.ctx;
      const x = chart.tooltip._active[0].element.x;
      const topY = chart.scales.y.top;
      const bottomY = chart.scales.y.bottom;
      // 垂直线样式可按需调整
      ctx.save();
      ctx.beginPath();
      ctx.moveTo(x, topY);
      ctx.lineTo(x, bottomY);
      ctx.lineWidth = 1;
      ctx.strokeStyle = '#e0e0e0';
      ctx.stroke();
      ctx.restore();
    }
  }
});

// 自定义Tooltip左上角定位器
Chart.Tooltip.positioners.fixedTopLeft = function() {
  return {
    x: 10, // 距离左上角X偏移可自行调整
    y: 10  // 距离左上角Y偏移可自行调整
  };
};

const data = {
  datasets: [{
    label: 'RTT',
    backgroundColor: '#C00122',
    borderColor: '#C00122',
    borderWidth: 2,
  }]
};

const config = {
  type: 'line',
  data: data,
  options: {
    animation: false,
    maintainAspectRatio: false,
    parsing: false, // 修正原拼写错误
    plugins: {
      legend: false,
      tooltip: {
        enabled: true,
        position: 'fixedTopLeft', // 调用自定义固定位置规则
        backgroundColor: 'rgba(0,0,0,0.7)',
        padding: 8
      }
    },
    elements: {
      point: {
        radius: 1,
        hoverRadius: 4 // 可选：激活时放大点增强提示效果
      }
    },
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'second',
          displayFormats: {
            'second': 'H:mm:ss',
          }
        },
        ticks: {
          minRotation: 0,
          maxRotation: 0,
          maxTicksLimit: 5
        }
      },
      y: {
        min: 0,
        ticks: {
          stepSize: 10
        }
      }
    },
    interaction: {
      mode: 'index',
      axis: 'x',
      intersect: false
    }
  }
};

上述配置完全兼容你按官方规则实现的动态数据填充逻辑，数据更新后交互规则和指示线会自动生效。

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