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

Answer 2

接受的答案不適合我，因爲我的提示總是可見的（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); 
} 

這是一個骯髒伎倆，但它的工作原理。