Chart.js 时间图上有多行时的ChartJS工具提示
点悬停似乎使用点索引在多个数据集中标记同一点。因此,当我将鼠标悬停在一个数据集上的索引1上时,索引1的样式也会与悬停在任何其他数据集上的样式相同,即使它根本不是同一个日期 如何使其仅显示实际悬停点的工具提示?或者至少不标记与悬停日期不同的点 以下是选项。比例:Chart.js 时间图上有多行时的ChartJS工具提示,chart.js,Chart.js,点悬停似乎使用点索引在多个数据集中标记同一点。因此,当我将鼠标悬停在一个数据集上的索引1上时,索引1的样式也会与悬停在任何其他数据集上的样式相同,即使它根本不是同一个日期 如何使其仅显示实际悬停点的工具提示?或者至少不标记与悬停日期不同的点 以下是选项。比例: scales: { xAxes: [ { ticks: { autoSkip: true, maxTic
scales: {
xAxes: [
{
ticks: {
autoSkip: true,
maxTicksLimit: 20
},
bounds: 'data',
type: 'time',
distribution: 'linear',
time: {
tooltipFormat: 'ddd DD. MMMM',
unit: 'week',
displayFormats: {
week: 'WW'
}
},
gridLines: {
display: false
}
}
],
yAxes: [
{
id: 'weight',
type: 'linear',
position: 'left',
ticks: {
callback(value) {
return value + 'kg';
}
},
gridLines: {
display: false
}
}
]
}
您可以在图表选项中显式定义,
“最近的”
将是一个不错的选择
options: {
tooltips: {
mode: 'nearest'
}
:获取距离点最近的项目
然而,我想知道为什么它不能像预期的那样工作,因为根据,
模式:“最近的”实际上是默认值。旧版本的Chart.js可能不是这样。因此,请确保使用库的最新稳定版本(当前)。您需要定义悬停模式,如下所示:
options: {
hover: {
mode: 'nearest'
}
}
这是您的鼠标,使用正确的悬停模式: