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
  }
});

工作example。

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

1 个答案: