Javascript 多个图表的Highcharts backgroundColor仅应用于一个图表

下面的示例位于JSFIDLE上，链接如下

两个Highcharts都在图表选项配置中设置了背景色

问题似乎是，无论我将backgroundColor属性设置为什么，第二个图表都默认为默认值，并忽略我指定的任何设置。我的目标是使两个图表背景都透明。我试过backgroundColor:null，backgroundColor:'Transparent'，backgroundColor:'rgba（255255,0.1）'

任何想法都将不胜感激

以下是两个图表的代码：

var chart;  

// Radialize the colors
        Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
            return {
                radialGradient: { cx: 0.4, cy: 0.2, r: 0.7
                                },
                stops: [
                    [0, color],
                    [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                ]
            };
        });
$('#container').highcharts({
        chart: {
                backgroundColor:'#000000',
                size:'100%'
        },
        title: {
            text: 'Browser market shares at a specific website, 2010'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                size: 200,
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }

            }
        },
        credits:{enabled:false},
        exporting:{enabled:false},
        colors:['#ADD46D','#F1744F','#b9e376','#f2a48d'],
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Supports You',   3],
                ['Opposes You',       1],
                ['Absent on Supporting',    0],
                ['Absent on Opposing',    0]
            ]
        }]
    });

    var chart2;

// Radialize the colors
        Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
            return {
                radialGradient: { cx: 0.4, cy: 0.2, r: 0.7
                                },
                stops: [
                    [0, color],
                    [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                ]
            };
        });
       $('#container2').highcharts({
        chart2: {
                 backgroundColor:'Transparent',
                 size:'100%'
        },
        legend:{
            enabled: false
        },
        title: {
            text: 'Browser market shares at a specific website, 2010'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                size: 200,
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }

            }
        },
        credits:{enabled:false},
        exporting:{enabled:false},
        colors:['#ADD46D','#F1744F','#b9e376','#f2a48d'],
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
               ['Supports You',   3],
                ['Opposes You',       10],
                ['Absent on Supporting',    0],
                ['Absent on Opposing',    0]
            ]
        }]
    });

var图；
//使颜色呈放射状
Highcharts.getOptions（）.colors=Highcharts.map（Highcharts.getOptions（）.colors，函数（color）{
返回{
径向梯度：{cx:0.4，cy:0.2，r:0.7
},
停止：[
[0，颜色]，
[1，Highcharts.Color（Color）.brighlight（-0.3）.get（'rgb'）]//darken
]
};
});
$（“#容器”）。高图({
图表：{
背景颜色：'#000000'，
尺寸：'100%'
},
标题：{
正文：“2010年特定网站的浏览器市场份额”
},
工具提示：{
pointFormat:“{series.name}:{point.percentage:.1f}%”
},
打印选项：{
馅饼：{
allowPointSelect:true，
光标：“指针”，
尺寸：200，
数据标签：{
启用：对，
颜色：'#000000'，
连接器颜色：'#000000'，
格式：'{point.name}:{point.percentage:.1f}%'
}
}
},
信用证：{已启用：错误}，
正在导出：{enabled:false}，
颜色：['#ADD46D'、'#F1744F'、'#b9e376'、'#f2a48d']，
系列：[{
键入“pie”，
名称：“浏览器共享”，
数据：[
[“支持你”，3]，
[“反对你”，1]，
[“支持时缺席”，0]，
[“对方缺席”，0]
]
}]
});
var-chart2；
//使颜色呈放射状
Highcharts.getOptions（）.colors=Highcharts.map（Highcharts.getOptions（）.colors，函数（color）{
返回{
径向梯度：{cx:0.4，cy:0.2，r:0.7
},
停止：[
[0，颜色]，
[1，Highcharts.Color（Color）.brighlight（-0.3）.get（'rgb'）]//darken
]
};
});
$（“#container2”）。高图({
图2：{
背景颜色：'透明'，
尺寸：'100%'
},
图例：{
已启用：false
},
标题：{
正文：“2010年特定网站的浏览器市场份额”
},
工具提示：{
pointFormat:“{series.name}:{point.percentage:.1f}%”
},
打印选项：{
馅饼：{
allowPointSelect:true，
光标：“指针”，
尺寸：200，
数据标签：{
启用：对，
颜色：'#000000'，
连接器颜色：'#000000'，
格式：'{point.name}:{point.percentage:.1f}%'
}
}
},
信用证：{已启用：错误}，
正在导出：{enabled:false}，
颜色：['#ADD46D'、'#F1744F'、'#b9e376'、'#f2a48d']，
系列：[{
键入“pie”，
名称：“浏览器共享”，
数据：[
[“支持你”，3]，
[“反对你”，10]，
[“支持时缺席”，0]，
[“对方缺席”，0]
]
}]
});

你做错了，

图表2

不是一个选项。更改此项：

$('#container2').highcharts({
    chart2: {
         backgroundColor:'Transparent',
         size:'100%'
    },
    ...
});

为此：

$('#container2').highcharts({
    chart: {
         backgroundColor:'Transparent',
         size:'100%'
    },
    ...
});

请参阅