從中心開始部分填充FLOT餅圖切片顏色，從中心開始

Question

任何人都知道這是可能的嗎？

基本上我需要能夠用顏色部分遮擋餅圖片，比如0-10範圍，其中0代表餅圖片中沒有顏色，10代表完全遮擋。謝謝你的幫助！

Answer 1

（免責聲明：我的另一個答案是關於餅圖的傳說和正確定位，而哈克但是當你不能修改插件代碼，所以這裏更清潔的第二個版本可以正常工作。）

這對於默認方法來說是不可能的，但是通過直接更改餅圖插件相對簡單。複製插件（source，1.1版），並以下更改本地副本：

1. 395線和406在function drawPie()：
   添加slices[i].radius的參數兩種drawSlice()電話。

2. 423線在function drawSlice()：
   更改功能的function drawSlice()頭到

   function drawSlice(angle, color, fill, sliceRadius) { 
   

3. 428行： 添加以下代碼：

   if (!jQuery.isNumeric(sliceRadius)) { 
       sliceRadius = radius;      
   } 
   else if (sliceRadius >= 0.0 && sliceRadius <= 1.0) { 
       sliceRadius = radius * sliceRadius;      
   } 
   

4. 441線至443（前從3中插入代碼）function drawSlice()：
   用替換。

上述變化後，可以定義一個radius屬性餅圖中每個數據點/片。這遵循與一般radius屬性相同的規則（如果radius介於0和1之間，它將用作一般半徑的百分比，否則將用作像素值）。

這是表示對radius屬性的值不同它fiddle：

var data = [{ 
    label: 'red', 
    color: 'red', 
    data: 1, 
    radius: 100 // radius in pixel (about 50% here) 
}, { 
    label: 'green', 
    color: 'green', 
    data: 3 
    // default is the general radius 
}, { 
    label: 'blue', 
    color: 'blue', 
    data: 2, 
    radius: 0.8 // radius 80% of general radius (about 160 pixel here) 
}]; 

Answer 2

這是不可能的默認方法，但你可以實現一些創造力類似的東西：

1. 創建每個範圍值，其中包含此範圍值每個切片獲得其正常的顏色一個數據集，所有其他切片得到color: 'transparent'。

2. 繪製一個單獨的餅圖每個範圍值，設置爲像這樣的選項：

   pie: { 
        show: true, 
        radius: 0.7 // example for a range value of 7 
       } 
   

3. 位置上彼此頂部所有的餅圖通過使用CSS。

結果（兩個不同的範圍值：7和10）：

您可能希望做一個手動的傳說，因爲只有最上面的傳說是完全可見。這裏有一個fiddle的例子，你可以從中開始開發自己的代碼。