Question

使用Chart.js库V.2时，我想将鼠标悬停在条形图上时将光标更改为“不允许”。

这是我的代码

            // Draw Chart
        var ctx = document.getElementById("main").getContext("2d");

        ctx.canvas.width = calculatedWidth;
        ctx.canvas.height = calculatedHeight || 400;
        mainDashboardChart = new Chart(ctx, {
            type: 'bar',
            data: dashboardDatas,
            yLabels: 0,
            options: dashboardOptions('noSubChart', suggestedMaxVal, subChartDataLength)
        });

我找不到办法做到这一点。有人知道这是否可行？

Answer 1

您可以使用getElementAtEvent方法获得有效点。

所以代码将是

var helpers = Chart.helpers;
helpers.bindEvents(mainDashboardChart, ["mousemove", "touchstart", "touchmove", "mouseout"], function(evt){
var activeElement = mainDashboardChart.getElementAtEvent(evt);
$('#main').css('cursor',activeElement.length ? 'not-allowed' : 'default'); });

Answer 2

您可以使用hover选项进行播放：

hover: {
    onHover: function(e) {
        $("#myChart").css("cursor", e[0] ? "pointer" : "default");
    }
}

圆环图上的工作示例：https://jsfiddle.net/Tintin37/s9m6mggL/1/

Chart.js库V.2将Cursor更改为不允许

2 个答案: