Javascript 单击标签-饼图jQuery Flot

我使用的是jqueryflot饼图，我在交互式饼图中使用了嵌入式标签。当我单击饼图中的一个扇区时，它会显示警报，但当我单击嵌入在扇区中的标签时，它不会响应单击操作。有什么解决办法吗

我的源代码

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://static.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.pie.min.js"></script>

<!-- CSS -->
<style type="text/css">
#flotcontainer {
    width: 600px;
    height: 400px;
    text-align: left;
}
</style>

<!-- Javascript -->
<script type="text/javascript">
$(function () { 
    var data = [
        {label: "data1", data:10},
        {label: "data2", data: 20},
        {label: "data3", data: 30},
        {label: "data4", data: 40},
        {label: "data5", data: 50},
        {label: "data6", data: 60},
        {label: "data7", data: 70}
    ];

    var options = {
            series: {
                pie: {
                    show: true,
                    radius: 1,
                    tilt: 0.5,
                    label:{                        
                        radius: 3/4,
                        formatter: function (label, series) {
                            return '<div style="border:1px solid gray;font-size:8pt;text-align:center;padding:5px;color:white;">' + label + '<br/>' +   
                            Math.round(series.percent) + '%</div>';
                        },
                        background: {
                            opacity: 0.5,
                            color: '#000'
                        }
                    }
                }
            },
            legend: {
                show: false
            },
            grid: {
                hoverable: true,
                clickable: true
            }
         };

    $.plot($("#flotcontainer"), data, options);  

    $("#flotcontainer").bind("plothover", function(event, pos, obj){
        if (!obj){return;}
        percent = parseFloat(obj.series.percent).toFixed(2);

        var html = [];
        html.push("<div style=\"flot:left;width:105px;height:20px;text-align:center;border:1px solid black;background-color:", obj.series.color, "\">",
                  "<span style=\"font-weight:bold;color:white\">", obj.series.label, " (", percent, "%)</span>",
                  "</div>");

        $("#showInteractive").html(html.join(''));        
    });
   $("#flotcontainer").bind("plotclick", function(event, pos, obj){
        if (!obj){return;}
        percent = parseFloat(obj.series.percent).toFixed(2);
        alert(obj.series.label + " ("+ percent+ "%)");

    });


});
</script>

<!-- HTML -->
<div>
    Hover percent : <span id="showInteractive"></span>
</div>
<div id="flotcontainer"></div>

#絮状容器{
宽度：600px；
高度：400px；
文本对齐：左对齐；
}
$（函数（）{
风险值数据=[
{标签：“数据1”，数据：10}，
{标签：“数据2”，数据：20}，
{标签：“数据3”，数据：30}，
{标签：“数据4”，数据：40}，
{标签：“数据5”，数据：50}，
{标签：“数据6”，数据：60}，
{标签：“数据7”，数据：70}
];
变量选项={
系列：{
馅饼：{
秀：没错，
半径：1，
倾斜：0.5，
标签：{
半径：3/4，
格式化程序：函数（标签，系列）{
返回'+label+'
'+
数学四舍五入（系列百分比）+'%'；
},
背景：{
不透明度：0.5，
颜色：“#000”
}
}
}
},
图例：{
节目：假
},
网格：{
悬停：是的，
可点击：正确
}
};
$.plot（$（“#flotcontainer”）、数据、选项）；
$（“flotcontainer”）.bind（“plothover”，函数（事件、位置、对象）{
如果（！obj）{return；}
百分比=parseFloat（对象系列百分比）.toFixed（2）；
var html=[]；
html.push（“”，
“”，obj.series.label，“（”，百分比，”），
"");
$（“#showInteractive”）.html（html.join（“”））；
});
$（“#flotcontainer”）.bind（“plotclick”，函数（事件、位置、对象）{
如果（！obj）{return；}
百分比=parseFloat（对象系列百分比）.toFixed（2）；
警报（obj.series.label+“（“+百分比+”）”）；
});
});
悬停百分比：

如果您想尝试，可以使用此编辑器

您可以添加

$（.pielab”）。单击（函数（）{alert（“clicked”）；}）以获得对饼图标签的单击

样本：

$("#flotcontainer").bind("plotclick", function(event, pos, obj){
    if (!obj){return;}
    alert('hello');

});

$(".pieLabel").click(function() { alert("clicked"); });


使用序列信息的其他解决方案：在定义图例时添加对自定义函数的调用（在div上单击），并传递正确的参数：

series: {
    pie: {
        show: true,
        radius: 1,
        tilt: 0.5,
        label:{                        
            radius: 3/4,
            formatter: function (label, series) {
                return '<div onclick="legendClicker(' + series.percent + ');" style="border:1px solid gray;font-size:8pt;text-align:center;padding:5px;color:white;">' + label + '<br/>' +   
                Math.round(series.percent) + '%</div>';
            },
            background: {
                opacity: 0.5,
                color: '#000'
            }
        }
    }
},

您可以添加
$（.pielab”）。单击（函数（）{alert（“clicked”）；}）以获得对饼图标签的单击

样本：

$("#flotcontainer").bind("plotclick", function(event, pos, obj){
    if (!obj){return;}
    alert('hello');

});

$(".pieLabel").click(function() { alert("clicked"); });


使用序列信息的其他解决方案：在定义图例时添加对自定义函数的调用（在div上单击），并传递正确的参数：

series: {
    pie: {
        show: true,
        radius: 1,
        tilt: 0.5,
        label:{                        
            radius: 3/4,
            formatter: function (label, series) {
                return '<div onclick="legendClicker(' + series.percent + ');" style="border:1px solid gray;font-size:8pt;text-align:center;padding:5px;color:white;">' + label + '<br/>' +   
                Math.round(series.percent) + '%</div>';
            },
            background: {
                opacity: 0.5,
                color: '#000'
            }
        }
    }
},

此处的另一个选项是手动向下传递事件：

$('.pieLabel').bind('click',function(e){
    $("#flotcontainer .flot-overlay").trigger(e);
});

现在，在饼图标签上的任何单击都将手动调用flot的
overlay
canvas上的单击事件。这将依次调用plotclick事件

更新的
此处的另一个选项是手动向下传递事件：

$('.pieLabel').bind('click',function(e){
    $("#flotcontainer .flot-overlay").trigger(e);
});

现在，在饼图标签上的任何单击都将手动调用flot的
overlay
canvas上的单击事件。这将依次调用plotclick事件

更新了
但如果我想知道标签属于哪个部门，该怎么办？因为大部分信息都在obj变量（回调参数）中，您对%中的值感兴趣吗？我想我可以很容易地获得标签中显示的值（使用基本文本解析），但我期待找到链接到该系列的方法。我找到了！我使用您的图例模板在div上添加onclick并传递参数，现在您可以简单地添加所需的行为。您应该将此单击和绘图悬停之间的代码共同化；-）但如果我想知道该标签属于哪个行业，该怎么办？因为大部分信息都在obj变量（回调参数）中，您对%中的值感兴趣吗？我想我可以很容易地获得标签中显示的值（使用基本文本解析），但我期待找到链接到该系列的方法。我找到了！我使用您的图例模板在div上添加onclick并传递参数，现在您可以简单地添加所需的行为。您应该将此单击和绘图悬停之间的代码共同化；-）我必须使用
$（“#flotcontainer.flot overlay”）.trigger（e）（不同的类名）@CharlesA，谢谢你的关注。我的答案是使用过时版本的flot。我已经修复了它。我必须使用
$（“#flotcontainer.flot overlay”）.trigger（e）（不同的类名）@CharlesA，谢谢你的关注。我的答案是使用过时版本的flot。我已经修好了。