Question

在我的案例气泡图中，我有一个关于不透明度（透明度）和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/

如果有解决这个问题的工作，我会很感激，如果有人发布它

编辑：Okey我发现不透明度不起作用，因为我认为它会

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。保留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

＆＃34;起泡＆＃34;高字符不透明度堆积

1 个答案: