ChartJs 2.0 Jak uzyskać kliknięcie informacji punktowych?

Question

W jaki sposób skonfigurować ChartJS w wersji 2.0, aby po kliknięciu punktu na wykresie radarowym podać dane powiązane z tym punktem, np. Etykietę, wartość danych, nazwę zestawu danych. Czytałem na https://github.com/nnnick/Chart.js/releases że wersja 2.0 zapewnia:

Nowe haki wydarzenie jak onHover i onClick wykonać ciężką pracę dla Ciebie. Przechodzą ci dobre rzeczy, nawet bez konieczności zlokalizować poprzez imprezy

Może ktoś proszę mi pokazać, co muszę zrobić, mam przeczytać dokumentację i próbował dołączenie do różnych kliknięcia i zdarzenia onclick, które wspierają różne przedmioty, ale nie potrafię wypracować sposobu uzyskania powiązanych danych.

Przykładowy kod (uproszczony), który używam jest:

<pre> 

    <script type="text/javascript"> 
     var config = { 
     type: 'radar', 
     data: { 
     labels: ["Total IOPs","Total Num. Execs","Total Worker Time Seconds","Total Physical Reads","Total Logical Writes","Total Logical Reads","Total Elapsed Time (s)","Longest Running Time (s)","Avg. IOPs per call","Avg. Elapsed Time (ms)","Avg. Num. Execs per Sproc","Avg IOPS per sproc"], 
    datasets: 
    [ 
    { 
     label: "DB1", 
     fillColor: "rgba(212, 212, 106, 0.2)", 
     strokeColor: "rgba(212, 212, 106, 1)", 
     pointColor: "rgba(212, 212, 106, 1)", 
     pointStrokeColor: "#fff)", 
     pointHighlightFill: "#fff", 
     pointHighlightStroke: "rgba(212, 212, 106, 1)", 
     data:[100,100,33.1715210355987,100,100,100,11.8161563835901,4.29405702507729,100,5.4590570719603,39.672945113066,100] 
    }, 
    { 
     label: "DB2", 
     fillColor: "rgba(165, 198, 99, 0.2)", 
     strokeColor: "rgba(165, 198, 99, 1)", 
     pointColor: "rgba(165, 198, 99, 1)", 
     pointStrokeColor: "#fff)", 
     pointHighlightFill: "#fff", 
     pointHighlightStroke: "rgba(165, 198, 99, 1)", 
     data: [41.7446840202287,46.5744067420714,100,79.3727756793507,20.5131426518999,41.747519880759,100,100,89.6330850100954,100,100,16.5613115389214] 
    } 
    ] 
    } 
    }; 

    $(function() { 
      var myRadar = new Chart(document.getElementById("myChart"), config); 
     //how do I attach to the onclick event which gives me the point info being clicked on in chartjs 2.0? 
     }); 

</script> 

<div class="radarChart"> 
    <canvas id="myChart" width="700" height="700"></canvas> 
</div> 

Wiele z góry dzięki.

Answer 1

powinien być w stanie użyć metody getElementsAtEvent, tak jak

document.getElementById("myChart").onclick = function(evt){ 
    var activePoints = myRadar.getElementsAtEvent(evt); 
    // use _datasetIndex and _index from each element of the activePoints array 
}; 

---

Fiddle - http://jsfiddle.net/uwaszvk7/

Answer 2

Innym sposobem osiągnięcia tego celu w ChartJS 2.0 jest wykorzystanie właściwości lastActive radaru wykres.

var myRadar = new Chart(document.getElementById("myChart"), config); 
Chart.defaults.global.responsive = true; 
Chart.defaults.global.hover.mode = 'single'; 
document.getElementById("myChart").onclick = function (evt) { 
var activePoint = myRadar.lastActive[0]; 
if (activePoint !== undefined) { 
     var datasetIndex = activePoint._datasetIndex; 
       var index = activePoint._index; 
       var datasetName = config.data.datasets[datasetIndex].label; 
       var title = config.data.labels[index]; 
       var dataValue = config.data.datasets[datasetIndex].data[index]; 
       alert("Dataset Name: [" + datasetName + "] title: [" + title + "] value: [" + dataValue + "]"); 
      } 
     }; 

Answer 3

Wywołanie getElementsAtEvent(event) na przykład wykresu przechodząc argument zdarzenie lub zdarzenia jQuery, powróci elementów punktowych , które są w tej samej pozycji, które w tym przypadku.

... 
var canvas = document.getElementById("myChart"); 
var myRadar = new Chart(canvas, config); 
canvas.onclick = function(evt) { 

    // => activePoints is an array of points on the canvas that are at the same position as the click event. 
    var activePoint = myRadar.getElementsAtEvent(evt)[0]; 

    if (activePoint !== undefined) { 
     var dataset = myRadar.data.datasets[activePoint._datasetIndex]; 
     var title = myRadar.data.labels[activePoint._index]; 
     var oldValue = dataset.data[activePoint._index]; 
     var newValue = oldValue + 10; 
     dataset.data[activePoint._index] = newValue; 
    } 

    // Calling update now animates element from oldValue to newValue. 
    myRadar.update(); 

    console.log("Dataset: '"+ dataset.label + "' Element '" + title + "' Value updated from: " + oldValue + " to: " + newValue); 
}; 

Answer 4

Dodatkowo można użyć var activePoints = chartObj.getElementsAtXAxis(evt); dostać najbliższą aktywny element oparty tylko na osi x. (Bardzo przydatne, gdy masz naprawdę małe wartości)