Flot餅圖 - 外部選擇切片

Question

我發現this solution。

如果圖表的類型是pie，如何指定高亮（x，y）的參數（x，y）？

謝謝

對不起，我的英語不好。

Answer 1

不幸的是，flot並沒有向用戶展示餅圖突出顯示代碼。因此，我們非常不走運了，但你在頁面上的適當位置合成單擊事件什麼可能工作：

$("#highligher").click(function() { 
    var e = jQuery.Event('click'); 
    e.pageX = 250; //add a made up x/y coordinate to the click event 
    e.pageY = 250; 
    $('#plot canvas:first').trigger(e); //trigger the click event on the canvas 
}); 

這是在行動：http://jsfiddle.net/ryleyb/mHJm5/

問題是你必須知道您想突出顯示的切片的位置。如果圖形是靜態的，這將很容易設置。如果它是一個動態圖，你必須挖掘餡餅代碼的來源以找出如何計算餅圖片的位置。在這種情況下，可能更容易擁有所有餅圖函數的副本並手動繪製餅圖覆蓋圖。

Answer 2

我們在圖表之外保持選擇狀態（作爲骨幹模型）。當發生選擇事件（點擊）時，我們在模型中設置選定的切片。選擇更改後，我們使用所選餅圖切片的選擇顏色刷新圖表。

var data = []; 
var color = slice.index == selected ? '#FF0000' : '#0000FF'; 
data.push({label:slice.Label,data:slice.Value,color:color}); 

上面的代碼片段對所有未選擇的片使用藍色，對於選定的片使用藍色。你的顏色邏輯會更復雜。

注意：您也可以使用rgba CSS作爲顏色，這可以帶來非常好的效果。例如：

var color = slice.index == selected ? 'rgba(0,0,255,1)' : 'rgba(0,0,255,0.5)'; 

Answer 3

通過改變一些事情剛剛得到這個工作...

我jquery.flot.pie.js改變highlight和unhighlight到pieHighlight和pieUnhighlight。

然後，在jquery.flot.pie.js這兩條線後...

plot.hooks.processOptions.push(function(plot, options) { 
      if (options.series.pie.show) { 

我說...

   plot.highlight = pieHighlight; 
       plot.unhighlight = pieUnhighlight;