Chart.JS-极地区域-图例悬停样式和边距 [英] Chart.JS - Polar area - Legend hover style and margin

问题描述

大家好，

希望这是一个简单的过程.我已经设置了带有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).

非常感谢！

推荐答案

您可以结合使用旧版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;
      }
    }
  }
}

这篇关于Chart.JS-极地区域-图例悬停样式和边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！