Question

如何在饼图中设置填充颜色的不透明度？我正在使用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的新手，所以请善待。谢谢！

Answer 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/

Answer 2

如果您知道要分配给切片的颜色，上述解决方案可以正常工作。但是如果从通用的调色板中挑选颜色，则无法赋予不透明度。它总是需要0.例如：

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

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

设置不透明饼图高图

2 个答案: