Chart.js如何绘制悬停时可显示对应数据的水平直线

你当前的折线数据集仅配置了单个数据点，Chart.js默认不会将单点渲染为横跨绘图区的水平直线，同时默认交互命中范围较窄，导致悬停很难触发数值提示。按以下方式修改代码即可实现需求：

• 为Total Recordings折线补充左右边界的等Y值数据点，形成贯穿全图的水平直线
• 隐藏折线默认的点位标记，仅保留悬停时的触发点，保证视觉整洁
• 调整图表交互规则与X轴刻度配置，确保悬停直线可正常显示总数值，且不影响原有柱状图展示

修改后完整代码 #

ngOnInit(): void {
  const myChart = new Chart('myChart', {
    type: 'bar',
    data: {
      labels: ['Recordings'],
      datasets: [
        {
          label: 'A',
          data: [this.data.a],
          borderColor: 'rgba(255,105,180,1)',
          backgroundColor: 'rgba(255,105,180,0.2)',
          barPercentage:0.4,
          borderWidth:2,
          order: 1
        },
        {
          label: 'B',
          data: [this.data.b],
          borderColor: 'rgba(75, 192, 192, 1)',
          backgroundColor: 'rgba(75, 192, 192, 0.2)',
          barPercentage:0.4,
          borderWidth:2,
          order: 2
        },
        {
          label: 'Total Recordings',
          // 配置两个边界点生成水平直线
          data: [
            {x: -0.5, y: this.data.totalrecordings},
            {x: 1.5, y: this.data.totalrecordings}
          ],
          type:'line',
          borderColor:'rgba(2,117,216,1)',
          backgroundColor:'rgba(2,117,216,0.2)',
          borderWidth: 2,
          order:0,
          pointRadius: 0, // 隐藏常规点位
          pointHoverRadius: 6, // 悬停时放大点位方便触发提示
          tension: 0, // 强制直线无弧度
          fill: false // 关闭区域填充避免遮挡柱状图
        }
      ]
    },
    options: {
      responsive: true,
      // 调整交互模式，悬停到直线即可触发提示
      interaction: {
        mode: 'nearest',
        intersect: true
      },
      plugins: {
        legend: {
          position: 'top',
        }
      },
      scales: {
        x: {
          // 锁定X轴范围适配水平直线
          min: -0.5,
          max: 1.5,
          ticks: {
            // 仅显示原有Recordings标签，隐藏虚拟点位刻度
            callback: function(val) {
              return val === 0 ? 'Recordings' : '';
            }
          }
        }
      }
    },
  })
}

效果说明 #

修改完成后，Total Recordings会显示为横跨整个图表区域的蓝色水平直线，鼠标悬停到直线任意位置都会触发tooltip，展示总录制数的具体数值，原有A、B两类数据的柱状展示不受影响。

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