我以前在图表中使用下面的配置.js@2.9.4在SvelteKit中，它在特定的折线图点中显示数据集的所有值.[REPL LINK]
options: {
tooltips: {
mode: 'index',
intersect: false
},
hover: {
mode: 'nearest',
intersect: true
},
responsive: true
}
输出为:
将图表升级到图表后.js@3.8.0它并不像上述配置那样在一个点上显示所有数据集.
这是图表中的输出.js@3:
我希望它在一个点上显示所有数据集.
提前谢谢！
这是因为您正在更新到一个新的主要版本，该版本有多个重大的突破性更改，工具提示配置也从options.tooltips名称空间移动到options.plugins.tooltip名称空间，如果您更改此名称空间，它将按预期工作.我建议你先读migration guide，因为如果你只更新版本号，会有更多的东西被改变.
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange'
}
]
},
options: {
plugins: {
tooltip: {
mode: 'index',
intersect: false
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script>
</body>