设置不透明度饼图 Highcharts答案

【问题标题】：Set Opacity Pie Chart Highcharts设置不透明度饼图 Highcharts
【发布时间】：2017-11-06 20:32:20
【问题描述】：

如何设置饼图中填充颜色的不透明度？我正在使用 highcharts js 库。见以下代码：

$(function () { 

    $('#container').highcharts({
        chart: {
            backgroundColor: 'none',
            type: 'pie',

        },
        title: {
            text: 'Health'
        },

        plotOptions: {
            series: {
                borderWidth: 0,
                fillOpacity: 0.1,
                colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', ],
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox',   45.0],

                ['IE',       26.8],

                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
                ]
        }]
    });
});

有点 JS 新手，所以请善待。谢谢！

【问题讨论】：

标签： highcharts opacity

【解决方案1】：

我会好心的。您可以使用 rgba 格式指定颜色，第四个参数是不透明度。请参阅下面的“Chrome”：

        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true,
                    color: 'rgba(150,100,50,0.1)'
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]
        }]

这是一个有效的小提琴：http://jsfiddle.net/manishie/62VJJ/

【讨论】：

谢谢！这完美地解决了我的问题。

【解决方案2】：

如果您知道要分配给切片的颜色，则上述解决方案可以正常工作。但是如果颜色是从一个通用的调色板中挑选出来的，就没有办法给出不透明度。它总是取 0。例如：

Highcharts.chart('container', {colors: [my palette]}, series:[{ type: 'pie', data: [1, 2, 3] }] )

在上述情况下，如果我设置了series: [{fillOpacity: 0.5}]，它不会被兑现。我看到的唯一选择是调色板应该具有rgba 格式的颜色。这可能是不可能的，因为我的调色板是通用调色板。有没有其他方法可以设置饼图中切片的不透明度。

【讨论】：