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

Answer 2

您可以设置css中的游标属性。例如：

span.crosshair {
    cursor: crosshair;
}

span.help {
    cursor: help;
}

span.wait {
    cursor: wait;
}

有关详细信息，请参阅this链接希望它有所帮助！

尼克

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

2 个答案: