在 morris.js 中触发甜甜圈片段的点击事件

Question

我可以使用 Morris.select() 在甜甜圈中保留默认片段。

除此之外，我想触发相同的点击事件（默认选择的片段）。有办法实现吗？

我什至试过$('path').eq(1).trigger('click')，但没用。

Answer 1

在您的 Morris Donut 对象中添加一个 on('click') 函数。然后您可以使用 row 参数访问 Donut 数据。

如您所说，您可以使用 Donut 的 select(index) 方法 select 一个片段。然后如果要显示对应段的数据，调用一个以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>

在 morris.js 中触发甜甜圈片段的点击事件

Trigger a click event on donut segment in morris.js

javascript

jquery

morris.js