Wie ändere ich den Cursor in einen Zeiger, wenn ich den Mauszeiger über einen Balken in einem ChartJS Balkendiagramm halte?

Question

Hier ist meine Diagrammerstellung

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

Dies ist der HTML ist, alles JavaScript ist und befindet sich im Inneren des Canvas-Element.

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

Ich habe es so, wenn ich auf einem Balken klicken sie als handeln „drill in“ und mit mehr Details meint eine Seite nehmen. Zu tun, dass ich diesen Code verwendet:

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

Ich mag es so, mein Cursor in einen Zeiger um den Benutzer zu informieren, sie können die Leiste klicken (wie es normalerweise mit einem Link ändern würde). Ich habe einige Beispiele dafür auf Stack Overflow gesehen, aber sie waren von den letzten ein oder zwei Jahren, die Beiträge enthielten Kommentare, in denen nach einer aktualisierten Version gefragt wurde, aber keine Lösungen.

Hier ist ein weiterer Beitrag, den ich gesehen habe, von dem ich glaube, dass es dasselbe ist, was ich erreichen möchte, aber es hat nicht für mich funktioniert.

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

Hat von jemandem wissen, wie ich das umsetzen kann, die aktuellste Live-Version von ChartJS mit?

Answer 1

Es gibt eine Cursor-Eigenschaft in CSS, die Sie festlegen können. zum Beispiel:

span.crosshair { 
    cursor: crosshair; 
} 

span.help { 
    cursor: help; 
} 

span.wait { 
    cursor: wait; 
} 

Bitte beachten Sie this Link für weitere Informationen Hoffe, es hilft!

• Nic