堆叠“气泡”时的高图表不透明度

Question

在我的案例气泡图中，我有一个关于不透明度（透明度）的问题，我想我可以用一个例子来最好地解释它

示例：我有一个包含 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'
            }
        }]
    });
});

文件：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

但我仍然想知道是否有解决方案来获得我的结果

Answer 1

您可以使用几种方法：

1. 按原样使用不透明度

   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

2. 按照您认为的方式使用不透明度

   • 根据元素数量使用 1 个元素集和所需的fillOpacity：

   • 最终的不透明度应该是多少（基于元素的数量）？

   0.01 * chartData.length
   

   Fiddle for a simulation of the expected opacity algorithm