基於相應名稱隱藏單個餅圖餅圖餅圖

Question

我用餅圖圖塊庫繪製了餅圖圖表。我有自己的自定義圖例框。所以我想知道是否可以隱藏基於用戶輸入的特定切片。就像這裏，我爲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）'，然後重繪。