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

Question

大家好，

希望这是一个简单的问题。我已经设置了一个带有onclick事件的图例，但是当我悬停在标签上时，希望鼠标指针变为“指针”（请参见上面的图表截图）。目前很难确定标签是链接，因为当我悬停在它们上面时，鼠标指针不会改变。

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

非常感谢！

- HDhani

Answer 1

我找到了一种不同的方法来做这件事。对我来说，这更贴近字面意义。也许因为在最初回答这个问题之后框架已经更新了。

 // This event fires anytime you mouse over the chart canvas.
onHover: function (event) {
    event.target.style.cursor = 'default';
},
responsive: true,
maintainAspectRatio: false,
legend: {
    display: true,
    position: 'bottom',
    onHover: function (event, legendItem) {
        // There is only a legendItem when your mouse is positioned over one
        if (legendItem) {
            event.target.style.cursor = 'pointer';
        }
    }
}

如果有人想要了解更多信息，这里是事件和图例的文档。

- BBQ Singular

---

"event.srcElement.style.cursor"已被弃用，请使用"event.target.style.cursor"代替 ;) - Nader

Answer 2

您可以通过结合图例 onHover 配置选项（将指针样式更改为pointer）和自定义工具提示配置选项（将指针样式更改回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;
      }
    }
  }
}

- jordanwillis

---

太棒了！完美运作……您是否也知道我如何在图表和图例之间获得空格（填充/边距）？ - HDhani

很遗憾，实际上没有办法在自动生成的图例和图表之间添加更多的空间。当然，您可以更改图例的位置，但是如果您真正想要控制其位置以及各个元素之间的间距，则应该使用.generateLegend()原型方法创建自己的自定义图例。在SO上搜索，有很多问题演示了如何完成这个过程。 - jordanwillis

嗯，好的，也许我会在另一个时间回来看看。感谢你的帮助！ - HDhani

@HDhani，事实证明使用默认图例是可能的。请查看我今天早些时候发布的这个答案。 - jordanwillis

哇，这是很多代码只是为了添加一些间距...但完美地工作了！！天才 :-) - HDhani

Answer 3

使用本地化(native)方式，在hover事件下，无需每次扫描DOM即可快速找到目标。

已在3.2.1和3.3.2版本中测试（截至2021年6月22日的最新版本）。

options: {
  plugins : {
    legend: {   
      labels: {
        onHover: function (e) {
          e.native.target.style.cursor = 'pointer';
        },
        onLeave: function (e) {
          e.native.target.style.cursor = 'default';
        }
      }
    }
  }
}

- Daniele Rugginenti

Answer 4

被接受的答案对我没有用，因为我的工具提示始终可见（position: "nearest"）。所以我使用超时来更改和恢复光标样式：

onHover: function(event, legendItem) {
    document.getElementById("canvas").style.cursor = "pointer";
    clearTimeout(hoverTimeout); // global var
    hoverTimeout = setTimeout(function() {
        document.getElementById("canvas").style.cursor = "default";
    }, 100);
}

这是一个卑鄙的诀窍，但它奏效了。

- Sga