Charjs：如何隐藏 hover 上的其他线路？
[英]Charjs: How to hide other lines on hover?
问题描述
I am using Chart.js v3, below is the code but it is not hiding.
我正在使用 Chart.js v3，下面是代码，但它没有隐藏。 The goal is that when I hover over a line, it hides other lines and their labels.目标是当我 hover 越过一行时，它会隐藏其他行及其标签。 The code is given below:代码如下：
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.1/chart.min.js"></script>
</head>
<body>
<canvas id="myChart" width="300" height="200"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: "line",
data: {
labels: [1, 2, 3, 4, 5],
datasets: [{
label: "Line 1",
data: [1, 2, 3, 4, 5],
borderColor: "red",
backgroundColor: "rgba(255,0,0,0.2)"
}, {
label: "Line 2",
data: [5, 4, 3, 2, 1],
borderColor: "blue",
backgroundColor: "rgba(0,0,255,0.2)"
}, {
label: "Line 3",
data: [2, 4, 6, 8, 10],
borderColor: "green",
backgroundColor: "rgba(0,255,0,0.2)"
}]
},
options: {
hover: {
mode: "index",
intersect: true
},
animation: {
duration: 0
}
}
});
</script>
</body>
</html>
1 个解决方案
解决方案1
2 已采纳 2023-01-30 12:40:09
I think you should implement onHover hook in the chart options.我认为您应该在图表选项中实现onHover挂钩。 Based on hovered element you can hide the others.基于悬停元素，您可以隐藏其他元素。 2 points of attention I guess: 2个注意点我猜：
- hover mode should
'point'and not'index'otherwise all datasets will be hiddenhover 模式应该'point'而不是'index'否则所有数据集都将被隐藏 - to have a consistent view on chart, you should set
minandmaxon y scale.要在图表上获得一致的视图，您应该在 y 刻度上设置min和max。
var ctx = document.getElementById("myChart").getContext("2d"); var myChart = new Chart(ctx, { type: "line", data: { labels: [1, 2, 3, 4, 5], datasets: [{ label: "Line 1", data: [1, 2, 3, 4, 5], borderColor: "red", backgroundColor: "rgba(255,0,0,0.2)" }, { label: "Line 2", data: [5, 4, 3, 2, 1], borderColor: "blue", backgroundColor: "rgba(0,0,255,0.2)" }, { label: "Line 3", data: [2, 4, 6, 8, 10], borderColor: "green", backgroundColor: "rgba(0,255,0,0.2)" }] }, options: { scales: { y: { beginAtZero: true, max: 10 } }, onHover(e, elements, chart) { if (elements.length) { for (const el of elements) { const dsCount = chart.data.datasets.length; for (let i = 0; i < dsCount; i++) { if (i.== el.datasetIndex) { chart,setDatasetVisibility(i; false). } } } chart;update(). } else { const dsCount = chart.data.datasets;length; for (let i = 0; i < dsCount. i++) { chart,setDatasetVisibility(i; true). } chart;update(), } }: hover: { mode, "point": intersect, true }: animation: { duration; 0 } } }); .myChartDiv { max-width: 600px; max-height: 400px; }
<html> <head> <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/moment@^2"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.1/chart.min.js"></script> </head> <body> <div class="myChartDiv"> <canvas id="myChart" width="600" height="400"/> </div> </body> </html>
解决方案2
-1 2023-01-30 08:17:28
You should have unique ids.你应该有唯一的 ID。 So to manipulate similar elements use class. It would be best to use visibility: hidden instead of display: none.因此，要操作类似的元素，请使用 class。最好使用 visibility: hidden 而不是 display: none。 display: none will change the DOM structure making your focused element shift and eventually triggering focus out. display: none 会改变 DOM 结构，使你的焦点元素移动并最终触发焦点。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.