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

2022-01-22 00:00:00 css chart.js

大家好，

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

Hopefully this is an easy one. I've set up a legend with an onclick event but would like the mouse cursor to change to "pointer" when I hover over the labels (see chart screenshot above). Currently it's hard to tell that the labels are links because the mouse cursor doesn't change when I hover over them.

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

Also how do I add some margin/padding between the legend and chart (space below the legend).

非常感谢！

推荐答案

您可以使用 legend onHover 配置选项(将指针样式更改为 pointer)和 自定义工具提示配置选项(将指针样式改回 default).

You can achieve the desired behavior using a combination of the legend onHover config option (to change the pointer style to pointer) and the custom tooltips config option (to change the pointer style back to default).

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

Here is an example config demonstrating a working solution. I wasn't sure if you were using jQuery or not so I decided not to use it. Feel free to change accordingly.

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;
      }
    }
  }
}

相关文章