无法在mouseOn上显示饼图中的数据

Question

我正在查看http://www.flotcharts.org/flot/examples/series-pie/index.html上的饼图示例，其中我正在查看交互式饼图，但在一个切片上的鼠标上，我无法看到该切片的百分比描述，就像出现一个警报弹出的单击事件一样。

那么，您能建议解决这个问题的方法吗?这样我就可以在MouseOver上显示百分比了。预先多谢:-)

< script >
  var dataSet = [{
    label: "Approved/In Planning",
    data: $ {
      pstats.taskCountByStatusMap.WeApproved!'0' + pstats.taskCountByStatusMap.WeInPlanning!'0'
    },
    color: "#777"
  }, {
    label: "In Progress",
    data: $ {
      pstats.taskCountByStatusMap.WeInProgress!'0'
    },
    color: "#5cb85c"
  }, {
    label: "On Hold",
    data: $ {
      pstats.taskCountByStatusMap.WeOnHold!'0'
    },
    color: "#f0ad4e"
  }, {
    label: "Cancelled",
    data: $ {
      pstats.taskCountByStatusMap.WeCancelled!'0'
    },
    color: "#d9534f"
  }, {
    label: "Complete",
    data: $ {
      pstats.taskCountByStatusMap.WeComplete!'0'
    },
    color: "#5bc0de"
  }, {
    label: "Closed",
    data: $ {
      pstats.taskCountByStatusMap.WeClosed!'0'
    },
    color: "#428bca"
  }];
jQuery(flotplaceholder).unbind();

function labelFormatter(label, series) {
  return "<div style='font-size:8pt; text-align:center; padding-left:-12px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";
}
var options = {
  series: {
    pie: {
      show: 'auto',
      radius: 1,
      label: {
        show: false,
      }
    }
  },
  legend: {
    show: false,
  },
  grid: {
    hoverable: true,
    clickable: true
  },
};
$(document).ready(function() {
  $.plot("#flotplaceholder", dataSet, options);
});
$('#flotplaceholder').bind("plothover", function(event, pos, obj) {
  alert(obj);
  var percent = parseFloat(obj.series.percent).toFixed(2);
  $("#hover").html("<span style='font-weight:bold; color:" + obj.series.color + "'>" + obj.series.label + " (" + percent + "%)</span>");
});

Answer 1

您的plothover事件不完整。

$(flotplaceholder).bind("plothover", function(event, pos, obj) {
  if(obj){ // am I hover on anything?
    var percent = parseFloat(obj.series.percent).toFixed(2);
    $("#hover").html("<span style='font-weight:bold; color:" + obj.series.color + "'>" + obj.series.label + " (" + percent + "%)</span>"); // set the contents
    $('#hover').css({'position':'absolute','display':'block','left':pos.pageX,'top':pos.pageY}); // set the css to show and position it
  }
  else {
    $('#hover').css('display','none'); // I am not hovering on anything, hide the tooltip
  }
});

工作示例。