Question

我创建了一个HighCharts BubbleChart，我正在尝试调整单个气泡的颜色和不透明度。我似乎能够调整颜色，但不透明度保持固定为0.5（当我在浏览器的DOM Inspector中查看Bubble的属性时）。这似乎是某种HighCharts默认值（对于整个系列？），我该如何单独修改它？

以下是显示该问题的最小HighCharts示例。

此外，Plunkr https://plnkr.co/edit/Wl7HhVgwOffN1CL3DxtC

上的代码相同

如果您在DOM检查器中查看黄色气泡，您会看到它的不透明度为0.5，但在代码中它显然设置为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

仅当fillOpacity设置为1时，您可以使用fillColor更改颜色的不透明度以进行设置。

也许你想读这个：https://github.com/highcharts/highcharts/issues/4278

编辑以添加此示例：

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

---编辑---

经过一番小小的讨论并对图书馆进行审查后，这似乎是让这项工作成功的唯一伎俩：

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

提取物：

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

这个怎么样：

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/

编辑： 100％不透明度和50％（默认值）是否足以在两者之间切换？

如果是这样，您只需在'yellow'和'rgb(255,255,0)'

之间切换即可

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

2 个答案: