chartjs hover 在数据上没有悬停在线
[英]chartjs hover over data without hoveringing on line
问题描述
When you hover over a specific data point on a chartjs linechart the point's value can be shown.
当您 hover 超过 chartjs 折线图上的特定数据点时，可以显示该点的值。 But let's say you hover on the graph, not on a specific data point but over the "empty space".但是假设您在图表上是 hover，不是在特定数据点上，而是在“空白空间”上。 In that case there should be some function to show the values of the points vertically aligned with the pointer.在那种情况下，应该有一些 function 来显示与指针垂直对齐的点的值。 Does any such solution exist?是否存在这样的解决方案？
Basically the reason I'm asking is to be able to make mobile-friendly graphs and it can be difficult/irritating for the user to try and hit the small data points with their fingers.基本上，我要问的原因是能够制作适合移动设备的图表，并且用户尝试用手指点击小数据点可能会很困难/烦人。
1 个解决方案
解决方案1
1 已采纳 2022-02-10 19:10:51
Yes, you can set intersect to false in the tooltip config:是的，您可以在工具提示配置中将intersect设置为false ：
var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderColor: 'orange' }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderColor: 'pink' } ] }, options: { plugins: { tooltip: { intersect: false } } } } var 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.7.0/chart.js"></script> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.