HighCharts设置图表背景透明-白红宇

HighCharts设置图表背景透明

阅读量：6930 次

发布时间：2019-06-27

本文共 2124 字，大约阅读时间需要 7 分钟。

其实就一句话：

backgroundColor: 'rgba(0,0,0,0)'

完整示例：

$(function () {        $('#container').highcharts({            chart: {                type: 'column',                backgroundColor: 'rgba(0,0,0,0)'            },            title: {                text: 'Stacked column chart'            },            xAxis: {                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']            },            yAxis: {                min: 0,                title: {                    text: 'Total fruit consumption'                },                stackLabels: {                    enabled: true,                    style: {                        fontWeight: 'bold',                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'                    }                }            },            legend: {                align: 'right',                x: -70,                verticalAlign: 'top',                y: 20,                floating: true,                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',                borderColor: '#CCC',                borderWidth: 1,                shadow: false            },            tooltip: {                formatter: function() {                    return ''+ this.x +'
'+                        this.series.name +': '+ this.y +'
'+                        'Total: '+ this.point.stackTotal;                }            },            plotOptions: {                column: {                    stacking: 'normal',                    dataLabels: {                        enabled: true,                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'                    }                }            },            series: [{                name: 'John',                data: [5, 3, 4, 7, 2]            }, {                name: 'Jane',                data: [2, 2, 3, 2, 1]            }, {                name: 'Joe',                data: [3, 4, 4, 2, 5]            }]        });    });

还有另外一个属性，plotBackgroundColor: null

这个属性的意思是指图表部分，不含标题、说明信息，x轴y轴上的提示信息等部分的背景色，例如：