多行Chartjs导致无法区分具有相同数据的多行的问题

Question

我正在使用Chartjs显示一个多行图表。这里的许多行包含相同的数据，因此我无法区分它们。即使我为不同的线条保留不同的颜色，我也看不到任何区别，因为它们都重叠在一起。至少在悬停在点上时，我希望显示所有行的数据，但只显示顶部行上的数据。如何理解/查看后面的行中的数据(首先是如何知道后面的行(。(忽略下面给出的代码段中的脚本错误(

var speedCanvas = document.getElementById("speedChart");
Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontSize = 18;
var dataFirst = {
label: "Car A - Speed (mph)",
data: [0, 59, 75, 20, 20, 55, 40],
lineTension: 0,
fill: false,
borderColor: 'red'
};
var dataSecond = {
label: "Car B - Speed (mph)",
data: [0, 59, 75, 20, 20, 55, 40],
lineTension: 0,
fill: false,
borderColor: 'blue'
};
var speedData = {
labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"],
datasets: [dataFirst, dataSecond]
};
var chartOptions = {
legend: {
display: true,
position: 'top',
labels: {
boxWidth: 80,
fontColor: 'black'
}
}
};
var lineChart = new Chart(speedCanvas, {
type: 'line',
data: speedData,
options: chartOptions
});

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="resources/sources/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
<canvas id="speedChart" width="600" height="400"></canvas>

Answer 1

要同时查看所有x轴数据，可以在工具提示部分中添加以下配置

mode: 'index'

你也可以添加配置，使其看起来像下面的

intersect: false,
position: 'nearest'

在你的情况下，你的选择看起来像这个

var chartOptions = {
legend: {
display: true,
position: 'top',
labels: {
boxWidth: 80,
fontColor: 'black'
}
},
tooltips:{
mode: 'index',
intersect: false,
position: 'nearest'
}
};