css - Chart.JS - 极地区域 - 图例悬停样式和边距

Question

大家好，

希望这是一个简单的过程。我已经设置了一个带有 onclick 事件的图例，但是当我将鼠标悬停在标签上时，我希望鼠标光标变为“指针”(参见上面的图表截图)。目前很难判断标签是链接，因为当我将鼠标悬停在它们上面时鼠标光标不会改变。

另外，我如何在图例和图表之间添加一些边距/填充(图例下方的空间)。

非常感谢!

Answer 1

您可以使用 legend onHover config option 的组合来实现所需的行为。 (将指针样式更改为 pointer)和 custom tooltips config option (将指针样式改回 default)。

这是一个演示有效解决方案的示例配置。我不确定你是否使用 jQuery，所以我决定不使用它。随意更改。

options: {
  legend: {
    position: 'top',
    labels: {
      fontColor: 'rgb(255, 99, 132)'
    },
    onHover: function(event, legendItem) {
      document.getElementById("canvas").style.cursor = 'pointer';
    }
  },
  tooltips: {
    custom: function(tooltip) {
      if (!tooltip.opacity) {
        document.getElementById("canvas").style.cursor = 'default';
        return;
      }
    }
  }
}