Question

我使用饼图flot库绘制了一个饼图图表。我有自己的自定义图例框。所以我试图知道是否可以根据用户输入隐藏特定切片。就像这里我为jsfiddle添加了一个类似的例子。

在图表的底部，我创建了一个图例框，并使用jquery添加了悬停功能。所以当我将鼠标悬停在那些传说上时，我正试图将相应的切片隐藏起来。

var data = [
   {
label: "Serie1",
data: 10,
url: "http://stackoverflow.com"},
{
label: "Serie2",
data: 30,
url: "http://serverfault.com"},
{
label: "Serie3",
data: 90,
url: "http://superuser.com"},
{
 label: "Serie4",
data: 70,
url: "http://www.google.com"},
{
label: "Serie5",
data: 80,
url: "http://www.oprah.com"},
{
 label: "Serie6",
 data: 110,
 url: "http://www.realultimatepower.net/"}
  ];

var options = {
   series: { pie: { show: true, label: false, } },
   grid: { clickable: true},
   legend: {
            show: false
        }

 };

  var testHTML = '';
  for(var k=0; k<data.length; k++){
    testHTML += "<span class = 'hoverableSpace' id='"+ data[k].label+"'>"+  data[k].label +"</span>";
  }

$(".mapper").html(testHTML);

var plot = $.plot($("#graphLoaderDiv"), data, options);


$(".hoverableSpace").on("mouseover", function(){
   alert($(this).attr('id'));
});

Answer 1

收听图例元素的点击次数。如果你得到一个，将它与相应的系列相匹配（有很多方法可以做到这一点）并将系列颜色设置为'transparent'或'rgba（0,0,0,0）'，然后重绘。

根据相应的名称隐藏flot饼图的各个切片

1 个答案: