有没有一个简单的方法可以做到这一点？
是的！！有一个非常简单的方法来实现这一点。如果你读过文档，你会很容易地发现这一点。
无论如何，基本上你需要在图表选项中将 tooltips mode 设置为**index**，以实现你想要的行为。

...
options: {
   tooltips: {
      mode: 'index'
   }
}
...

此外，您可能需要设置以下内容：

...
options: {
   tooltips: {
      mode: 'index',
      intersect: false
   },
   hover: {
      mode: 'index',
      intersect: false
   }
}
...

这将使所有预期的悬停/标签交互在悬停在图形上最接近的x值处的任何位置时发生。

来自文档：

#索引

查找同一索引处的项。如果intersect设置为true，则使用第一个相交项确定数据中的索引。如果intersect为false，则使用x方向上最近的项来确定索引。
下面是一个工作示例：

var ctx = document.getElementById('canvas').getContext('2d');
var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ['Jan 01', 'Jan 02', 'Jan 03'],
      datasets: [{
         label: 'Apples Sold',
         data: [3, 5, 1],
         borderColor: 'rgba(255, 99, 132, 0.8)',
         fill: false
      }, {
         label: 'Oranges Sold',
         data: [0, 10, 2],
         borderColor: 'rgba(255, 206, 86, 0.8)',
         fill: false
      }, {
         label: 'Gallons of Milk Sold',
         data: [5, 7, 4],
         borderColor: 'rgba(54, 162, 235, 0.8)',
         fill: false
      }]
   },
   options: {
      tooltips: {
         mode: 'index',
         intersect: false
      },
      hover: {
         mode: 'index',
         intersect: false
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="canvas"></canvas>

对于Chart.js 3.3.2，您可以使用@baburao的方法，但需要做一些修改。您可以查看documentation。将tooltip放入plugins中。示例：

...
options: {
    plugins: {
        tooltip: {
            mode: 'nearest',
            intersect: false
        }
    }
}
...

我知道这是一篇老文章，但在一段时间里，我需要在多个数据集上划分一个条形，但标签要保留为原始值：
例如：

dataset 1: Totals: 10 15 10 
dataset 2: Red: 4 5 9 
dataset 3: Blue: 4 2 1

在我的图表中，我想显示“Totals”条，并将其一部分用红色/蓝色或“其余部分”（这是Totals颜色）着色。我不会编写修改数据集的代码，但我会完成chartjs v3+的@busterroni答案

plugins: {
   tooltip: {
     mode: 'index',
     intersect: false,
     callbacks: {
       label: (item) => item.dataset.label + ': ' + 
          this.originalValues[item.datasetIndex].data[item.dataIndex]
     }
   }
}

您可以在绘制如下数据后实现此目标：HTML

<div class="container">
  <h2>Chart.js — Line Chart Demo</h2>
  <div>
    <canvas id="myChart"></canvas>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"> 
</script>

CSS

.container {
  width: 80%;
  margin: 15px auto;
}

JavaScript

var ctx = document.getElementById('myChart').getContext('2d');
function convert(str) {
  var date = new Date(str),
    mnth = ("0" + (date.getMonth() + 1)).slice(-2),
    day = ("0" + date.getDate()).slice(-2);
  return [date.getFullYear(), mnth, day].join("-");
}
var date = ["Tue Jun 25 2019 00:00:00 GMT+0530 (India Standard Time)"];
 var y1 = [12];
 var y2 = [32];
 var y3 = [7];
var dataPoints1 = [], dataPoints2 = [], dataPoints3 = [], datep=[];
console.log(date.length)
if(date.length=="1"){
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["",convert(date[0]),""],
    datasets: [{
      label:"Tweets",
      backgroundColor: "rgba(153,255,51,0.4)",
      fill:false,
      borderColor:"rgba(153,255,51,0.4)",
      data: [null,y1[0],null]
    }, {
      label:"Retweets",
      backgroundColor: "rgba(255,153,0,0.4)",
      fill:false,
      borderColor:"rgba(255,153,0,0.4)",
      data: [null,y2[0],null]
    },{
      label:"Favourites",
      backgroundColor: "rgba(197, 239, 247, 1)",
      fill:false,
      borderColor:"rgba(197, 239, 247, 1)",
      data:[null,y3[0],null]
      }
      ]
  },
  options: {
         scales: {
            xAxes: [{
               gridLines: {
                  display: false
               }
            }],
            yAxes: [{
               ticks: {
                  display: true
               },
               gridLines: {
                  display: false,
               // drawBorder: false //maybe set this as well
               }
            }]
         },
        }
});}
else{
for (var i = 0; i < date.length; i++) {
  datep.push(convert(date[i]))
  dataPoints1.push(y1[i]); 
  dataPoints2.push(y2[i]); 
  dataPoints3.push(y3[i]); 
}
console.log(datep)
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: datep,
    datasets: [{
      label:"Tweets",
      backgroundColor: "rgba(153,255,51,0.4)",
      fill:false,
      borderColor:"rgba(153,255,51,0.4)",
      data: dataPoints1
    }, {
      label:"Retweets",
      backgroundColor: "rgba(255,153,0,0.4)",
      fill:false,
      borderColor:"rgba(255,153,0,0.4)",
      data: dataPoints2
    },{
      label:"Favourites",
      backgroundColor: "rgba(197, 239, 247, 1)",
      fill:false,
      borderColor:"rgba(197, 239, 247, 1)",
      data:dataPoints3
      }
      ]
  },
  options: {
         scales: {
            xAxes: [{
               gridLines: {
                  display: false
               }
            }],
            yAxes: [{
               ticks: {
                  display: true
               },
               gridLines: {
                  display: false,
               // drawBorder: false //maybe set this as well
               }
            }]
         },
        }
});
}

或chk this fiddle https://jsfiddle.net/gqozfb4L/

我使用“chart.js”：“^4.2.1”，这对我来说是有效的：

...
options: {
    plugins: {
        tooltip: {
            mode: 'x',
            intersect: false
        }
    }
}
...

mode：'nearest'
将不起作用，因为它将仅显示最近点，而不是特定x轴的所有点

您可以尝试使用JavaScript来跟踪用户鼠标，并根据位置返回该顶点的数据。

document.querySelector('.button').onmousemove = (e) => {
  const x = e.pageX - e.target.offsetLeft
  const y = e.pageY - e.target.offsetTop
  e.target.style.setProperty('--x', `${ x }px`)
  e.target.style.setProperty('--y', `${ y }px`)
 
}