Wykrywanie zdarzeń najechania kursorem na części wykresu za pomocą wykresu Chart.js

Question

Zrobiłem wykres kołowy za pomocą wykresu Chart.js, a chciałbym wykryć, kiedy segment jest przewracany. Znalazłem mnóstwo dokumentacji dotyczącej manipulowania etykietami narzędzi, które pojawiają się po najechaniu kursorem na segmenty, ale nic nie dotyczy robienia czegoś innego, gdy pojawi się etykietka narzędzia. czy to możliwe?

Answer 1

nr ...

Nie ma nic w API ChartJS aby zastąpić lub przedłużenia podpowiedź,

Ale obejście ...

Można zmodyfikować metodę draw z klasy Chart.Tooltip. Umożliwiłoby to "zrobienie czegoś innego", gdy etykieta narzędzia byłaby normalnie renderowana przez ChartJS.

Metoda draw chcesz związać do startów w linii 1351 źródła tutaj:

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

Answer 2

wiem, że to już zostało podane zaakceptowanej odpowiedzi, i nie jestem pewien, czy to ma spełniać swoje przypadek użycia, ale Chart js wydał aktualizację (może miesiąc temu), która pozwalała na niestandardowe podpowiedzi. Pozwala to na uruchamianie niestandardowej funkcji, gdy normalnie byłaby narysowana etykietka. Mają przykład w sekcji próbki git huba

w skrócie można zdefiniować niestandardową funkcję

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

oto przykład dają w próbkach z dodatkowym kawałkiem tekstu dodawana do podpowiedzi html. Jedyną irytującą rzeczą, jaką widzę, jest to, że nie podaję segmentu/punktu/paska, który wywołał tę podpowiedź, która byłaby naprawdę przydatna, ponieważ wtedy mógłbyś zrobić coś na wykresie znając te informacje, ale dostałeś dane z podpowiedzi, co oznacza, że zamiast tego może coś z tym zrobić.

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

Droga Robię to jest nieco bardziej prosta: zakładając masz już jakiś kod określający płótna jak canvas = document.getElementById("chart"); i wykresu kołowego jest window.myPie. Można użyć onmousemove javascript zdarzeń lub jQuery najechaniu

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

w moim przypadku podświetlić wiersz tabeli na podstawie wartości el[0]._index

Answer 4

Jeżeli znaleźli małą sztuczkę korzystając customTooltip też. Szukałem rozwiązania, aby uzyskać zdarzenie, jeśli użytkownik porusza się myszą nad wartością i wyświetla się etykieta narzędzia. Głównie lubiłem prezentować w innej ramce kilka szczegółowych informacji poza surowymi wartościami Plot.

var options = {    
    customTooltips: function (tooltip) 
    { 
    if (!tooltip) return; 

    tooltip.custom = false; 
    tooltip.draw(); 
    OnEntrySelected(tooltip.title); 
    tooltip.custom = this; 
    } 
} 

Zwyczaj etykietka jest rysowany za pomocą tooltip.draw(), ale to wywołuje metodę niestandardową. Ustawiłem ją na false, aby uniknąć pętli rekursywnej, wywołać domyślne zachowanie i pobrać dane potrzebne do mojego wywołania zwrotnego (OnEntrySelected), które w tym przypadku jest ciągiem etykiety x-Axis. To zdarzenie jest wyzwalane, gdy wyświetlana jest etykieta narzędzia.

Answer 5

Dla v2.0 wersja:

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