javascript - 当我将鼠标悬停在 ChartJS 条形图中的条形上时，如何将光标更改为指针？

Question

这是我的图表创建

createChart = function (name, contributions, idArray) {
    globalIdArray = idArray;
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: "bar",
        data: {
            labels: name,
            datasets: [{
                label: "Contributions",
                data: contributions,
                backgroundColor: [
                    'rgba(0, 255, 0, 0.2)',
                    'rgba(0, 255, 0, 0.2)',
                    'rgba(0, 255, 0, 0.2)',
                    'rgba(0, 255, 0, 0.2)',
                    'rgba(0, 255, 0, 0.2)'
                ]
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            },
            onClick: handleClick,
            onHover: handleHover
        }
    });

这是 HTML，一切都是 JavaScript，并且驻留在 canvas 元素内。

<canvas chart-hover="onHover" id="myChart" width="200" height="200"></canvas>

我这样做是为了当我单击一个栏时，它们充当“钻取”并获取包含更多详细信息的页面。为此，我使用了以下代码:

function handleClick(e) {
            debugger;
            var activeElement = myChart.getElementAtEvent(e);
            var designerId = _idArray[activeElement[0]._index];
            window.location.href = "/Display/search/index?designerId=" + designerId;
        }

我想让我的光标变成一个指针，让用户知道他们可以单击该栏(因为它通常会随着链接而改变)。我在 Stack Overflow 上看到了一些这样的例子，但它们是过去一两年的事，这些帖子包括要求更新版本的评论，但没有解决方案。

这是我看到的另一篇文章，我相信它与我想要完成的事情是一样的，但它对我不起作用。

How to change cursor style to pointer on hovering over points of the chart?

有谁知道如何使用最新的 ChartJS 实时版本来实现这一点？

Answer 1

我只需要当光标位于折线图上的条形或点上时才发生变化，因此想出了这个简单的解决方案。将您的函数放在图表声明之外。

var chart = new Chart(ctx, {
    data: {...},
    options: {
     onHover: graphHover
    }
});
function graphHover(e, array) {
    if(array.length > 0) {
        e.target.style.cursor = 'pointer';
    }else {
        e.target.style.cursor = '';
    }
}