Auslösen eines Klickereignisses auf einem Donut-Segment in morris.js

Question

Ich kann ein Standardsegment in Donut mit Morris.select() beibehalten.

Abgesehen davon möchte ich ein Klick-Ereignis auf dem gleichen (Segment der Standardauswahl) auslösen. Gibt es einen Weg, dies zu erreichen?

Ich versuchte sogar $('path').eq(1).trigger('click'), aber es hat nicht funktioniert.

Answer 1

Fügen Sie in Ihrem Morris Donut-Objekt eine on('click')-Funktion hinzu. Dann können Sie mit dem Parameter row auf die Donut-Daten zugreifen.

Wie Sie gesagt haben, können Sie ein Segment mit der select(index) Methode des Donut auswählen. Wenn Sie dann die Daten des entsprechenden Segments anzeigen möchten, rufen Sie eine Funktion auf, die die Donut-Daten als Parameter verwendet, z. B. morrisDonut.data[index].

Hier ist ein funktionierendes Beispiel:

var morrisDonut = Morris.Donut({ 
 
    element: 'donut', 
 
    data: [ 
 
    {label: "Download Sales", value: 12}, 
 
    {label: "In-Store Sales", value: 30}, 
 
    {label: "Mail-Order Sales", value: 20} 
 
    ], 
 
    resize: true 
 
}).on('click', function (i, row) { 
 
    // Do your actions 
 
    // Example: 
 
    displayData(i, row); 
 
}); 
 

 
// Index of element to select 
 
var i = 2; 
 
// Selects the element in the Donut 
 
morrisDonut.select(i); 
 
// Display the corresponding data 
 
displayData(i, morrisDonut.data[i]); 
 

 
function displayData(i, row) { 
 
    $('#data').html(row.label + ": " + row.value); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet" /> 
 

 
<div id="donut"></div> 
 
<div id="data"></div>