0

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

4

2 回答 2

1

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

        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/

于 2013-10-02T23:23:51.567 回答
-1

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

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

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

于 2017-11-06T12:32:20.973 回答