Raphaeljs將點擊事件添加到餅圖的切片

我需要響應Raphael餅圖中每個切片上的點擊事件。我以這種方式嘗試過，但似乎沒有這樣做。我的代碼只是兩行註釋，如下面的代碼，它從RaphaelJS的演示餅圖直接來自「我的代碼」 ...Raphaeljs將點擊事件添加到餅圖的切片

 <script> 
     var u = ""; 
     var r = ""; 
     window.onload = function() { 

      r = Raphael("holder"), 
       pie = r.piechart(320, 240, 100, [25, 20, 13, 32, 5, 21, 14, 10,41,16,12,18,16,14,12,13], 
        { legend: ["%%.%% - Enterprise Users", "IE Users"], 
        legendpos: "west", href: ["http://raphaeljs.com", "http://g.raphaeljs.com"] 
        } 
       ); 

      r.text(320, 100, "Interactive Pie Chart").attr({ font: "20px sans-serif" }); 

      pie.hover(function() { 
       u = this;     // My Code 
       u.onclick = clickEvent; // hook to the function 
       this.sector.stop(); 
       this.sector.scale(1.1, 1.1, this.cx, this.cy); // Scale slice 

       if (this.label) {        // Scale button and bolden text 
        this.label[0].stop(); 
        this.label[0].attr({ r: 7.5 }); 
        this.label[1].attr({ "font-weight": 800 }); 
       } 
      }, function() { 
       this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce"); 


       if (this.label) { 
        this.label[0].animate({ r: 5 }, 1500, "bounce"); 
        this.label[1].attr({ "font-weight": 400 }); 
       } 
      }); 

     }; 
     function clickEvent(){ 
      console.log("Clicked!") 
     } 
    </script>

來源

2015-03-13 dkoss

是否有一個原因，爲什麼您要連接在懸停事件的單擊事件？在懸停功能之外執行'pie.onclick = clickEvent'似乎更加正確 – 2015-03-13 19:16:32

@ShanRobertson我需要在每個片上觸發。切片具有子組，因此單擊然後請求擴展到不同餅圖的新數據。這可能會持續幾個級別。基本上是一個深入研究的情況。謝謝你的回覆...... – dkoss 2015-03-16 13:27:28

Raphaels語法是有點不同。

入住這documentation

你的代碼應該如下：

u.click(clickEvent);

來源

2015-03-19 07:38:00

謝謝你的建議，但這是我在閱讀拉斐爾文檔後嘗試的第一件事。但它沒有迴應。不過，我感謝你的幫助。我找到了解決方案，並在我得到片刻後發佈。我也將不得不問Raphael的創造者... – dkoss 2015-03-20 12:55:16

Raphaeljs將點擊事件添加到餅圖的切片

回答

相關問題