点击Morris饼图段落时显示模态窗口。

Question

我正在使用 MorrisJS 制作一些饼图和甜甜圈图，类似于这个。一切都很好，但是当我点击图表中的一个部分时，我希望弹出一个模态窗口。

我通常是这样做模态窗口的：

<!-- Link to shw Modal -->
<a href="#modal-id"  class="btn btn-success" data-toggle="modal" > Click to show modal</a>

<!-- Modal -->
<div class="modal fade" id="modal-id" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
...
</div>

现在在这个莫里斯饼图中，我没有ID元素，因此我无法实现模态框。有什么方法可以做到这一点吗？

- Alexxio

Answer 1

var donut = new Morris.Donut({
    element: 'sales-chart',
    resize: true,
    colors: ["#3c8dbc", "#f56954", "#00a65a", "#0CDE47", "#076ABE", "#998373", "#378238"],
    data: [
        {label: "Android", value: 12},
        {label: "iPhone", value: 30},
        {label: "Other", value: 20}
        ],
        labelColor: '#303641',
        hideHover: 'auto',
        formatter: function (x) { 
            return x + ' % ';
        }
}).on('click', function(i, row){
    alert(row.label);
    console.log(i, row);
});

- Vivek

Answer 2

将此点击事件处理程序添加到甜甜圈或饼图的末尾。

Charts.Donut({
            element: _element,
            data: _data,
            colors: _colors,
        }).on('click', function (i, row) {  
           $('#id_modal').modal({ show: true });
        });

- Jacob King

---

如何获取被点击元素的标签？ - Adarsh Ravi

Answer 3

点击函数 visualizza_modal();

            function visualizza_modal() 
                  {
                    jQuery('#id_modal').modal({
                         show: true
                      });
                  } 

- itpao25

---

莫里斯饼图中的ID元素在哪里？ - Alexxio