ChartJs 2.0 Tıklandığında nokta bilgilerini nasıl edinebilirim?

Question

ChartJS sürüm 2.0'ı bir radar grafiğindeki bir noktaya tıklamak üzerine, bu noktayla ilişkili verileri, yani etiket, veri değeri, veri kümesi adı sağlamak için nasıl yapılandırırsınız. Sürüm 2.0'ın sağladığı https://github.com/nnnick/Chart.js/releases'da okudum:

OnHover ve onClick gibi yeni etkinlik kancaları sizin için çok çalışıyor. Hatta olay yoluyla bulmak zorunda kalmadan size iyi şeyler geçmesine

birisi ben belgeleri okudum ve çeşitli tıklamayla takılarak çalıştı ve ne yapmaları gerektiğini bana göster misiniz farklı nesneler destekleyen onClick olay ama İlişkili verileri elde etmeyi nasıl başaramazsınız. Ben kullanıyorum

Örnek kod (basitleştirilmiş) 'dir: önceden

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

çok teşekkürler.

Answer 1

Çok

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

gibi getElementsAtEvent yöntemi kullanmak gerekir

---

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

Answer 2

başka yolu da radarın lastActive özelliğini kullanmak ChartJS 2.0 Bu edilir başarmayı grafik.

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

bir olayın veya jQuery olayın bir argüman geçmiş olmanın Grafik örneğinde getElementsAtEvent(event) çağrılması, bu olayın aynı konumda olduğunu altındadır nokta elemanlarını dönecektir.

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

Ayrıca sadece x ekseninde dayalı en yakın aktif elemanı almak için var activePoints = chartObj.getElementsAtXAxis(evt); kullanabilirsiniz. (Gerçekten çok küçük değerlere sahip olduğunuz zamanlar için Süper kullanışlı)