当我将鼠标悬停在 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 上看到了一些这样的例子，但它们是过去一两年的，帖子包括要求更新版本的评论，但没有解决方案。

这是我看到的另一篇文章，我相信它与我正在努力完成的事情相同，但它对我不起作用。

如何将光标样式更改为悬停在图表点上的指针？

有谁知道我如何使用 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 = '';
    }
}

Answer 2

css中有一个光标属性可以设置。例如 ：

span.crosshair {
    cursor: crosshair;
}

span.help {
    cursor: help;
}

span.wait {
    cursor: wait;
}

请参阅此链接了解更多信息