Erkennen von Hover-Ereignissen über Teile eines Diagramms mithilfe von Chart.js

Question

Ich habe ein Kreisdiagramm mit Chart.js erstellt und möchte feststellen, ob ein Segment über dem Diagramm liegt. Ich habe eine Menge Dokumentation über die Manipulation der Tooltips gefunden, die angezeigt werden, wenn ich über Segmente segle, aber nichts darüber, etwas anderes zu tun, wenn ein Tooltip erscheint. Ist das möglich? Kein

Answer 1

...

Es gibt nichts in der ChartJS API außer Kraft zu setzen oder den Tooltip zu erweitern,

Aber eine Abhilfe ...

können Sie ändern die draw Methode der Chart.Tooltip Klasse. Dies würde es Ihnen ermöglichen, "etwas anderes zu tun", wenn der Tooltip normalerweise von ChartJS gerendert würde.

Die Auslosung Methode, die Sie in beginnt in Zeile 1351 der Quelle hier binden wollen:

https://github.com/nnnick/Chart.js/blob/master/src/Chart.Core.js

Answer 2

ich dies bereits eine akzeptierte Antwort gegeben wurde, wissen, und ich bin nicht sicher, ob dies Ihr nicht erfüllt Anwendungsfall, aber Chart js veröffentlichte ein Update (vielleicht vor einem Monat oder so), das benutzerdefinierte Tooltips erlaubt. Dadurch kann eine benutzerdefinierte Funktion ausgeführt werden, wenn eine QuickInfo normalerweise gezeichnet wurde. Sie haben ein Beispiel, in dem Beispielabschnitt git Nabe

kurzum Sie eine benutzerdefinierte Funktion

Chart.defaults.global.customTooltips = function(tooltip){//do what you want} 

hier definieren, ist das Beispiel, das sie in den Proben gibt mit einem zusätzlichen kleinen Text zu einem HTML-Tooltip hinzugefügt. Die einzige nervige Sache, die ich sehe, ist, dass das Segment/Punkt/Balken, die diesen Tooltip ausgelöst hat, nicht verfügbar wäre, was wirklich praktisch wäre, da Sie mit der Kenntnis dieser Informationen etwas tun könnten, aber Sie erhalten die Tooltip-Daten kann stattdessen etwas damit machen.

Chart.defaults.global.customTooltips = function (tooltip) { 
 
     // Tooltip Element 
 
     var tooltipEl = $('#chartjs-tooltip'); 
 
     // Hide if no tooltip 
 
     if (!tooltip) { 
 
      tooltipEl.css({ 
 
       opacity: 0 
 
      }); 
 
      return; 
 
     } 
 
     // Set caret Position 
 
     tooltipEl.removeClass('above below'); 
 
     tooltipEl.addClass(tooltip.yAlign); 
 
     // Set Text 
 
     tooltipEl.html(tooltip.text+ " anythign custom you want"); 
 
     // Find Y Location on page 
 
     var top; 
 
     if (tooltip.yAlign == 'above') { 
 
      top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding; 
 
     } else { 
 
      top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding; 
 
     } 
 
     // Display, position, and set styles for font 
 
     tooltipEl.css({ 
 
      opacity: 1, 
 
      left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px', 
 
      top: tooltip.chart.canvas.offsetTop + top + 'px', 
 
      fontFamily: tooltip.fontFamily, 
 
      fontSize: tooltip.fontSize, 
 
      fontStyle: tooltip.fontStyle, 
 
     }); 
 
    }; 
 
    var pieData = [{ 
 
     value: 300, 
 
     color: "#F7464A", 
 
     highlight: "#FF5A5E", 
 
     label: "Red" 
 
    }, { 
 
     value: 50, 
 
     color: "#46BFBD", 
 
     highlight: "#5AD3D1", 
 
     label: "Green" 
 
    }, { 
 
     value: 100, 
 
     color: "#FDB45C", 
 
     highlight: "#FFC870", 
 
     label: "Yellow" 
 
    }, { 
 
     value: 40, 
 
     color: "#949FB1", 
 
     highlight: "#A8B3C5", 
 
     label: "Grey" 
 
    }, { 
 
     value: 120, 
 
     color: "#4D5360", 
 
     highlight: "#616774", 
 
     label: "Dark Grey" 
 
    }]; 
 

 
    var ctx1 = document.getElementById("chart-area1").getContext("2d"); 
 
    window.myPie = new Chart(ctx1).Pie(pieData); 
 
    var ctx2 = document.getElementById("chart-area2").getContext("2d"); 
 
    window.myPie = new Chart(ctx2).Pie(pieData);

#canvas-holder { 
 
     width: 100%; 
 
     margin-top: 50px; 
 
     text-align: center; 
 
    } 
 
    #chartjs-tooltip { 
 
     opacity: 1; 
 
     position: absolute; 
 
     background: rgba(0, 0, 0, .7); 
 
     color: white; 
 
     padding: 3px; 
 
     border-radius: 3px; 
 
     -webkit-transition: all .1s ease; 
 
     transition: all .1s ease; 
 
     pointer-events: none; 
 
     -webkit-transform: translate(-50%, 0); 
 
     transform: translate(-50%, 0); 
 
    } 
 
    #chartjs-tooltip.below { 
 
     -webkit-transform: translate(-50%, 0); 
 
     transform: translate(-50%, 0); 
 
    } 
 
    #chartjs-tooltip.below:before { 
 
     border: solid; 
 
     border-color: #111 transparent; 
 
     border-color: rgba(0, 0, 0, .8) transparent; 
 
     border-width: 0 8px 8px 8px; 
 
     bottom: 1em; 
 
     content:""; 
 
     display: block; 
 
     left: 50%; 
 
     position: absolute; 
 
     z-index: 99; 
 
     -webkit-transform: translate(-50%, -100%); 
 
     transform: translate(-50%, -100%); 
 
    } 
 
    #chartjs-tooltip.above { 
 
     -webkit-transform: translate(-50%, -100%); 
 
     transform: translate(-50%, -100%); 
 
    } 
 
    #chartjs-tooltip.above:before { 
 
     border: solid; 
 
     border-color: #111 transparent; 
 
     border-color: rgba(0, 0, 0, .8) transparent; 
 
     border-width: 8px 8px 0 8px; 
 
     bottom: 1em; 
 
     content:""; 
 
     display: block; 
 
     left: 50%; 
 
     top: 100%; 
 
     position: absolute; 
 
     z-index: 99; 
 
     -webkit-transform: translate(-50%, 0); 
 
     transform: translate(-50%, 0); 
 
    }

<script src="https://raw.githack.com/chartjs/Chart.js/v1.1.1/Chart.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="canvas-holder"> 
 
    <canvas id="chart-area1" width="50" height="50" /> 
 
</div> 
 
<div id="canvas-holder"> 
 
    <canvas id="chart-area2" width="300" height="300" /> 
 
</div> 
 
<div id="chartjs-tooltip"></div>

Answer 3

Die Art, wie ich es zu tun habe, ist etwas einfacher: vorausgesetzt, Sie bereits einen Code haben die Definition der Leinwand wie canvas = document.getElementById("chart"); und Ihr Kreisdiagramm ist window.myPie. Sie können die onmousemove verwenden JavaScript-Event oder jQuery

canvas.onmousemove = function(evt) { 
    var el = window.myPie.getElementsAtEvent(evt); 
    //do something with the el object to display other information 
    //elsewhere on the page 
} 

schweben In meinem Fall eine Tabellenzeile markieren basierend auf dem Wert von el[0]._index

Answer 4

Wenn ein kleiner Trick customTooltip auch gefunden. Ich suchte nach einer Lösung, um ein Ereignis zu erhalten, wenn der Benutzer mit der Maus über einen Wert bewegt und ein Tooltip angezeigt wird. Hauptsächlich möchte ich neben den rohen Plot-Werten auch Detailinformationen in einem anderen Rahmen präsentieren.

Der benutzerdefinierte Tooltipp wird mit tooltip.draw() gezeichnet, aber dies ruft die benutzerdefinierte Methode auf. Ich setze es auf false, um eine rekursive Schleife zu vermeiden, rufe das Standardverhalten auf und nimm die Daten, die ich für meinen Callback benötige (OnEntrySelected), was in diesem Fall die Zeichenfolge der x-Achsenbeschriftung ist. Dieses Ereignis wird immer dann ausgelöst, wenn der Tooltip angezeigt wird.

Answer 5

Für v2.0 Version:

Chart.defaults.global.hover.onHover = function(x) { 
    if(x[0]) { 
    var index = x[0]._index; 
    // Place here your code 
    } 
};