score:0

Accepted answer

There are a few approaches you could use:

  1. Using the opacity the way it is

    1.1. Keep fillOpacity, but vary the # of elements:

    • Keeping the fillOpacity: 0.01:

    • How many elements it is necessary to get a resultant 0.99 opacity?

    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. Keep the # of elements, but vary fillOpacity

    • Keeping the 100 elements:

    • How much should fillOpacity be set to get a resultant 0.99 opacity?

    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. Using the opacity the way you thought it worked

    • Use 1 element set with a desired fillOpacity based on the element quantity:

    • How much should the resultant opacity be (based on the quantity of elements)?

    0.01 * chartData.length
    

    Fiddle for a simulation of the expected opacity algorithm


Related Query

More Query from same tag