如何在HighCharts中更改单个气泡的颜色和不透明度？

Question

I have created a HighCharts BubbleChart and am trying to make adjustment to the color and opacity of an individual bubble. I seem to be able to adjust the color but the opacity stays fixed at 0.5 (When I view the Bubble's properties in the browser's DOM Inspector). This seems to be some sort of HighCharts default (for the whole series?), how do I modify it on an individual basis?

Below is a minimal HighCharts example showing the issue.

Also, the same code on Plunkr https://plnkr.co/edit/Wl7HhVgwOffN1CL3DxtC

If you view the yellow bubble in the DOM Inspector you'll see it has an opacity of 0.5 although in the code it is clearly set to 1.

$(function () {
    $('#container').highcharts({
        chart: {
        type: 'bubble',
        plotBorderWidth: 1,
        zoomType: 'xy'
    },

    title: {
        text: 'Highcharts Bubbles'
    },

    xAxis: {
        gridLineWidth: 1
    },

    yAxis: {
        startOnTick: false,
        endOnTick: false
    },

    plotOptions: {
        bubble: {
            minSize: 3,
            maxSize: 50
        }
    },

    series: [{
        data: [
          {x:9,y:81,z:63},
          {x:98,y:5,z:89,color:"rgba(255,255,0,1)"},
          {x:51,y:50,z:73}
        ],
    }]

    });
});

Answer 1

only when fillOpacity is set to 1 you can change the opacity of a color using fillColor for set it.

Maybe you want to read this: https://github.com/highcharts/highcharts/issues/4278

Edit for add this example:

{ x:51,
  y:50,
  z:73,
  color: 'rgba(255,0,0,0.5)',
  marker: {
    fillColor:0,
    fillOpacity:1
  }
}

--- Edit ---

After a little discusion and review of the library this appear to be the only trick to made this work has expected:

https://plnkr.co/edit/MvAC94ovCwvPQCe3tZo3?p=preview

Extract:

series: [{
            data: [
              {x:9,y:81,z:63},
              { x:98,
                y:5,
                z:89
              },
              { x:51,
                y:50,
                z:73,
                color: {
                    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
                    stops: [
                        [0, 'rgba(255,255,0,0.1)'],
                        [1, 'rgba(255,255,0,0.1)']
                    ]
                }
              }
            ],
        }]

Answer 2

How about this:

series: [{
    data: [
      {x:9,y:81,z:63},
      {x:98,y:5,z:89, color: 'yellow'},
      {x:51,y:50,z:73}
    ],

http://jsfiddle.net/3mtmmfzx/52/

Edit: Would 100% opacity and 50% (the default) be enough to switch between?

If so you could just switch between 'yellow' and 'rgb(255,255,0)'