如何在高图表中更改单个气泡的颜色和不透明度

How do I change an individual bubble's color and opacity in HighCharts?

本文关键字：气泡 颜色 不透明度 单个 高图表      更新时间：2023-09-26

我创建了一个HighCharts BubbleChart，并试图调整单个气泡的颜色和不透明度。我似乎可以调整颜色，但不透明度固定在 0.5（当我在浏览器的 DOM 检查器中查看气泡的属性时）。这似乎是某种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}
        ],
    }]
    });
});
只有

当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)']
                    ]
                }
              }
            ],
        }]

这个怎么样：

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)'之间切换

相关文章：