javascript - 根据相应的名称隐藏浮动饼图的各个切片

Question

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

在图表的底部，我制作了一个图例框并使用 jquery 添加了悬停功能。所以当我将鼠标悬停在这些图例上时，我想要做什么......相应的切片应该被隐藏。

http://jsfiddle.net/mHJm5/18/

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

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