ChartJS鼠标移到图例上显示手形

最新推荐文章于 2026-06-18 20:08:04 发布

原创最新推荐文章于 2026-06-18 20:08:04 发布 · 2.9k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#chartjs

收录于

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何通过添加手势响应来增强图表的用户体验。具体包括给图例和图表本身添加鼠标悬停效果，使得当用户将鼠标悬停在图表上时，光标会变为指针样式，提升了图表的交互性和可用性。

在Chart options中添加：

// 给图例加手势
legend: {
  onHover: function(e) {
      e.target.style.cursor = 'pointer';
  }
},

// 给图加手势
hover: {
  onHover: function(e) {
      var point = this.getElementAtEvent(e);
      if (point.length) {
        e.target.style.cursor = 'pointer';
      } else {
        e.target.style.cursor = 'default';
      }
  }
}