在图例圆环图的 onHover 期间更快地加载 Tooltip
Posted
技术标签:
【中文标题】在图例圆环图的 onHover 期间更快地加载 Tooltip【英文标题】：Load Tooltip faster during onHover of Legend Doughnut chart 【发布时间】：2021-10-09 17:21:33 【问题描述】：我目前有一个与this answer 中显示的答案完全相同的实现，为了清楚起见，我将在此处包含它。如果您运行代码并将鼠标悬停在图例中的项目之间，您会注意到如果快速将鼠标悬停在项目上，图表上的工具提示将不会显示。
将此与将鼠标悬停在圆环图中的项目上进行比较。功能更快。
var options =
type: 'doughnut',
data:
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
]
,
options:
plugins:
legend:
position: 'left',
onHover: (evt, item, legend) =>
const chart = legend.chart;
const tooltip = chart.tooltip;
const chartArea = chart.chartArea;
tooltip.setActiveElements([
datasetIndex: 0,
index: item.index,
],
x: (chartArea.left + chartArea.right) / 2,
y: (chartArea.top + chartArea.bottom) / 2,
);
chart.update();
,
,
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" ></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>
</body>【问题讨论】：
【参考方案1】：对于那些遇到同样问题的人，我想分享我的发现。
最终发生的是工具提示需要太多时间才能“消失”。您可以从文档中编辑不同的“过渡”、“动画”或“动画”，它们都会做不同的事情。我不知道如何加快“消失”的速度。
相反，请实现 Chart.js 文档中给出的示例外部工具提示。默认情况下，此工具提示不会出现默认工具提示出现/消失的问题。
编辑： 我想提供一些我学到的可能对实现外部工具提示有用的东西。
-
对示例外部工具提示进行了编码，使其使用原始工具提示的逻辑。这可能很好，但是如果您想要将鼠标悬停在图例上并显示工具提示的功能，我建议您添加一个“标志”，如果您将鼠标悬停在标签上，则为 true，否则为 false。应将其添加为检查以显示工具提示。
当您在图例的 onHover 中设置活动元素并且您已将“外部”设置为 externalTooltipHandler 时，您的 externalTooltipHandler 将自动知道从活动元素数组中生成项目。你不应该调用或传递externalTooltipHandler，你应该只设置'external：externalTooltipHandler'
如果我可以在这里澄清任何事情，请告诉我，我在此工具提示上花费的时间比我想要的要多。
【讨论】：
以上是关于在图例圆环图的 onHover 期间更快地加载 Tooltip的主要内容，如果未能解决你的问题，请参考以下文章