highcharts當「泡沫」被堆疊

我有關於不透明度（透明性）的問題的不透明度與highcharts在我的情況下氣泡圖和我認爲可以用一個例子更好地說明它highcharts當「泡沫」被堆疊

實施例：我有100一系列氣泡在圖表中相互覆蓋，不透明度設置爲1％（0.01）。我的問題是，不應該所有的氣泡彼此都不透明度達到100％（1），或者我知道不透明度的工作原理是錯誤的嗎？

$(function() { 
    $('#container').highcharts({ 
     chart:{ 
      type:'bubble' 
     },   
     series: [{ 
      name: '1', 
      data: [{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}, 
        {x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}, 
        {x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}, 
        {x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}, 
        {x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}, 
        {x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}, 
        {x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}, 
        {x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}, 
        {x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}, 
        {x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}     
        ], 
      marker:{ 
       fillOpacity:0.01, 
       lineWidth:0, 
       fillColor:'#000000' 
      } 
     }] 
    }); 
});

FIDLE：http://jsfiddle.net/kte3omhg/1/

，如果有一個工作圍繞這個問題，我將不勝感激如果有人發佈它

編輯：歐凱我發現的透明度不爲工作我認爲這將

Total Opacity = First Opacity + (100 - First Opacity) * Second Opacity 
       = 0.7 + (1 - 0.7) * 0.7 
       = 0.7 + (0.3) * 0.7 
       = 0.7 + 0.21 
       = 0.91

http://en.wikipedia.org/wiki/Mathematical_descriptions_of_opacity

但我還是想知道如果有讓我的結果

來源

2014-10-29 Grega Lenič

的結果是什麼，你實際上是在尋找什麼？你想用它來做什麼？ – jlbriggs 2014-10-30 12:57:36

有幾個方法，你可以使用一個解決方案：

使用透明度是

方式1.1。保持fillOpacity，但改變# of elements：

保持fillOpacity: 0.01：
它有多少個元素是必要得到一個結果0.99不透明？

function calculateTimes(opacity, overlappingOpacity) { 
    var times = 1; 
    var currentOpacity = opacity; 
    while (currentOpacity < overlappingOpacity) { 
     currentOpacity += (1 - currentOpacity) * opacity; 
     times++; 
    } 
    return times; 
} 
calculateTimes(0.01, 0.99); //Gives you 459 elements

Fiddle for 459 elements

1.2。保持# of elements，但變化fillOpacity

保持100個元素：
多少應該fillOpacity設置以獲得最終0.99不透明？

function calculateOverlappedOpacity(opacity, times) { 
    return times == 1 ? opacity : opacity + (1 - opacity) * calculateOverlappedOpacity(opacity, times - 1); 
} 

function calculateOpacityFor(resultantOpacity, times) { 
    for (var i = 0.0001; i <= 1; i += 0.0001) { 
     if (calculateOverlappedOpacity(i, times) >= resultantOpacity) { 
      return i; 
     } 
    } 
    return 1; 
} 
calculateOpacityFor(0.99, 100) //Gives you a fillOpacity of 0.0451

Fiddle for fillOpacity: 0.0451

使用透明度你認爲它基於元素數量的工作
- 使用1個元素與期望fillOpacity設置方式：
- 產生的不透明度應該多少（基於元素的數量）？
```
0.01 * chartData.length 
```
Fiddle for a simulation of the expected opacity algorithm

來源

2015-03-24 21:31:47 falsarella

highcharts當「泡沫」被堆疊

回答

相關問題