javascript - Highcharts : Change opacity of a column chart

Question

使用 highchart 时，我需要更改堆栈图中列的不透明度。因为我需要透明

<script type="text/javascript">
    $(function () {
        $('#trend').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Weight Oscillation Projection'
            },
            xAxis: {
                categories: ['1st Week', '2nd Week', '3rd Week', '4th Week', '5th Week', '6th Week']
            },
            yAxis: {
                title: {
                    text: 'Weight (Kg)'
                },
                stackLabels: {
                    enabled: false,                    
                }
            },
            legend: {
                enabled: false,  
            },
            tooltip: {
                enabled: false,
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: false,                        
                    }
                },                    
            },
            series: [{
                name: 'Jane',
                data: [2, 2, 3, 2, 1],                   
            }, {
                name: 'Joe',
                data: [3, 4, 4, 2, 5],
                color: '#fff',
                style: {opacity: 0.0}  
            }]
        });
    });    
</script>

我知道系列 -> 数据对象没有更改样式的属性。我们怎么能做这样的事情呢？

Answer 1

使用 rgba format更改不透明度。

例子:

color: 'rgba(255, 255, 255, 0.50)'

---

引用

• Highcharts Docs chart design and style

Semi-transparent colors in Highcharts are given in the rgba format rgba(255,255,255,1). The last parameter is the alpha or opacity that ranges from 0, fully transparent, to 1, fully opaque. Because of this, there are no separate opacity options in the Highcharts API.