觸發morris.js中的甜甜圈段上的點擊事件

Question

我能夠使用Morris.select（）在甜甜圈中保留默認段。

除此之外，我想觸發同一個（默認選擇段）的點擊事件。 有沒有辦法達到這個目的？

我甚至試過$('path').eq(1).trigger('click')，但它沒有工作。

Answer 1

在Morris Donut對象中添加on('click')函數。然後，您可以使用row參數訪問甜甜圈數據。

正如您所說的，您可以使用甜甜圈的select(index)方法選擇一個細分。然後，如果要顯示相應段的數據，請調用以Donut數據爲參數的函數，例如：morrisDonut.data[index]。

這裏是一個工作示例：

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>