morris.jsのドーナツセグメントのクリックイベントをトリガー

Question

Morris.select（）を使用して、ドーナツのデフォルトセグメントを維持することができます。

これとは別に、同じ（デフォルト選択のセグメント）でクリックイベントをトリガーしたいと思います。 これを達成する方法はありますか？

私も$('path').eq(1).trigger('click')を試しましたが、うまくいきませんでした。

Answer 1

Morris Donutオブジェクトにon('click')関数を追加します。次に、rowパラメータを使用してDonutデータにアクセスできます。

あなたが言ったように、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>