悬停在chart.js中的空值上时隐藏工具提示

jdg4fx2g  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(222)

我目前使用的是chart.js 3.5.0和react-chart-js 3.0.4的折线图,给定两个数据集。
第一个数据集包含{x,y}格式的数据,其中某些y为空值。当鼠标悬停在这些空值上时,工具提示会跳到第二个数据集的开头。在本例中,我希望隐藏工具提示,但通过回调解决问题不起作用。
有人遇到过同样的问题吗?
Screenshot
codesandbox

  1. const options = {
  2. interaction: {
  3. intersect: false
  4. },
  5. maintainAspectRatio: true,
  6. animation: false,
  7. plugins: {
  8. tooltip: {
  9. mode: 'nearest',
  10. axis: 'x',
  11. position: 'average',
  12. yAlign: "bottom"
  13. },
  14. },
  15. scales: {
  16. y: {
  17. type: 'linear',
  18. beginAtZero: true,
  19. min: 0,
  20. grace: '20%',
  21. }
  22. },
  23. chartArea: {
  24. backgroundColor: "rgb(240,240,240)"
  25. }
  26. }
xtfmy6hx

xtfmy6hx1#

您可以在工具提示配置中使用mode: 'x'。同时在两个数据集中将pointHitRadius设置为0,这样您的工具提示中就不会有重复的值。
示例:https://codesandbox.io/s/hardcore-brown-1vxcjh?file=/src/components/CChart.jsx

相关问题