ChartJs 2.0 Wie kann ich auf geklickte Informationen zugreifen?

Question

Wie konfigurieren Sie ChartJS Version 2.0, wenn Sie auf einen Punkt auf einem Radardiagramm klicken, um die mit diesem Punkt verknüpften Daten anzugeben, z. B. Bezeichnung, Datenwert, Datensatzname. Ich lese auf https://github.com/nnnick/Chart.js/releases, dass Version 2.0 bietet:

Neue Event-Hooks wie onHover und onClick machen die harte Arbeit für Sie. Sie geben Ihnen die guten Sachen, ohne auch nur über Event

Könnte jemand bitte zeigen Sie mir suchen zu müssen, was ich tun muss ich die Dokumentation gelesen haben und versucht Befestigung an den verschiedenen klicken und onClick Ereignisse, die die verschiedenen Objekte unterstützen, aber kann nicht herausfinden, wie man die zugehörigen Daten erhält.

Beispielcode (vereinfacht), die ich benutze ist:

<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> 

Vielen Dank im Voraus.

Answer 1

Sie sollten in der Lage sein, die getElementsAtEvent Methode zu verwenden, wie so

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

andere Möglichkeit, dies in zu erreichen ChartJS 2.0 ist die lastActive Eigenschaft des Radars verwenden Diagramm.

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

aufrufen getElementsAtEvent(event) auf Ihrem Diagramm Instanz ein Argument eines Ereignisses vorbei, oder jQuery Ereignis, werden die Punktelemente zurück, die an die der gleichen Position dieses Ereignisses sind.

... 
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

Zusätzlich können Sie var activePoints = chartObj.getElementsAtXAxis(evt); verwenden, um das nächste aktive Element nur auf der x-Achse auf Basis zu erhalten. (Super nützlich, wenn Sie einige sehr kleine Werte haben)