[英]Click on label - Pie chart jQuery Flot
我正在使用jQuery flot餅圖,在交互式餅圖中使用了嵌入式標簽。 當我單擊餅圖中的一個扇區時,它會顯示警報,但是當我單擊嵌入在該扇區中的標簽時,它不會響應單擊動作。 有什么解決辦法嗎?
我的源代碼
<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>
如果要嘗試,可以使用此編輯器
這里的另一種選擇是手動向下傳遞事件:
$('.pieLabel').bind('click',function(e){
$("#flotcontainer .flot-overlay").trigger(e);
});
現在,對餅狀標簽的任何單擊都將手動調用flt的overlay
畫布上的click事件。 這將依次調用plotclick事件。
更新的plunkr
您可以添加$(".pieLabel").click(function() { 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'
}
}
}
},
和功能:
function legendClicker(info) {
// Do what you want
alert("legend click / " + info);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.