jQuery Flot不透明度取決於值

我需要根據它的值更改flot bar/pie的顏色。

例如，我有數據作爲

data = [ 
    { label: "Label 1", color: "orange", data: 10} 
    { label: "Label 2", color: "orange", data: 20} 
    { label: "Label 3", color: "orange", data: 70} 
]; 

$.plot(placeholder, data, options);

標籤3作爲最大的一個應留橙色和標籤2和標籤1應具有不透明度（例如各10％會給-10到不透明度）。

類似的東西：

enter image description here

在正確的方向任何想法或提示？

謝謝！

P.S.標籤值會動態變化，所以我不能只添加預定義的顏色。

來源

2013-03-14 ignaty

只需設置不透明度值/ 100？所以10％的餅會有0.1的不透明度，70％的餅會有0.7的不透明度。你也可以做到這一點，所以最大的餡餅是1個不透明度，其他的是相對的，所以10％會有1/7不透明度，20％會有2/7。 – powerbuoy 2013-03-14 12:45:19

編輯，這應該工作

var data = [{ label: "Label 1", color: "rgba(255,165,0,1.0)", data: 10}, 
     { label: "Label 2", color: "rgba(255,165,0,1.0)", data: 20}, 
     { label: "Label 3", color: "rgba(255,165,0,1.0)", data: 70}] 

    var maxOpacity = 0; 

    data.forEach(function(a) { 
     maxOpacity = Math.max(a.data, maxOpacity); 
    }); 

    data.forEach(function(a) { 
     var opacity = (((a.data * 100)/maxOpacity)/100).toFixed(2); 

     if (a.color.indexOf('rgba') == 0) { 
      var b = a.color.split(','); 
      b[3] = opacity; 
      a.color = b.join(",") + ")"; 
     } 
    }); 

    var placeholder = $("#placeholder"); 

    $.plot(placeholder, data, { 
     series: { 
      pie: { 
       show: true 
      } 
     } 
    });

來源

2013-03-14 13:15:52

這是事，謝謝。但我怎麼可以將它結合起來並推送到$ .plot（佔位符，數據，選項）;作爲數據（或任何其他數組）？ – ignaty 2013-03-14 13:25:42

任何想法如何將顏色：「orange」轉換爲rgba爲每個顏色添加不透明度值，並將它們放在一起作爲{label：「Label 1」，color：「orange with opacity」，data：10}？ :) – ignaty 2013-03-14 13:37:29

我已經編輯了asnwer – 2013-03-14 13:42:23

也許這段代碼可以幫助你。我沒有測試它，它可能不適合你的代碼，但我認爲我的主要想法是可見的:)。

var array = [{ label: "Label 1", color: "orange", data: 10}, 
    { label: "Label 2", color: "orange", data: 20}, 
    { label: "Label 3", color: "orange", data: 70}]; 

array.sort(function(a, b){ 
    var a1= a.data, b1= b.data; 
    if(a1== b1) return 0; 
    return a1 > b1? 1: -1; 
}); 

var arrLength = array.length; 
var opacitySteps = 100/arrLength; 

for (var i = 0; i < arrLength; i++) { 
    element = arr[i]; 
    element.color = opacitySteps * i; 
}

來源

2013-03-14 12:49:49 Eich

jQuery Flot不透明度取決於值

回答

相關問題