Chart.JS - 极地区域 - 传奇悬停风格和边距

Question

大家好，

希望这很简单。我已经用onclick事件设置了一个图例，但希望鼠标光标变为＆＃34;指针＆＃34;当我将鼠标悬停在标签上时（见上面的图表截图）。目前很难说标签是链接，因为鼠标光标悬停在标签上时不会发生变化。

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

非常感谢！

Answer 1

您可以使用legend onHover config option（将指针样式更改为assembly）和custom tooltips config option（将指针样式更改回{{1}的组合来实现所需的行为}}）。

以下是演示工作解决方案的示例配置。我不确定你是否使用jQuery，所以我决定不使用它。随意改变。

pointer

Answer 2

我找到了另一种方法来完成这项工作。这在我的脑海中更为真实。也许是因为最初得到答复以来，该框架已在此期间进行了更新。

 // This event fires anytime you mouse over the chart canvas.
onHover: function (event) {
    event.srcElement.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.srcElement.style.cursor = 'pointer';
        }
    }
}

如果有人想了解更多，这里是events和legend的文档。

Answer 3

接受的答案对我不起作用，因为我的工具提示始终可见（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);
}

这是一个肮脏的伎俩，但它确实有效。

Answer 4

更快，不用每次都扫描DOM，在hover event中找到native下的target

在 3.2.1 和 3.3.2 版本中测试（最新于 2021 年 6 月 22 日）

req.body