javascript - Highcharts 多个图表的背景颜色仅应用于一个图表

Question

以下示例位于 jsfiddle，链接如下。 http://jsfiddle.net/KWqU2/2/

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

问题似乎是，无论我将 backgroundColor 属性设置为什么，第二个图表都默认为默认值，并忽略我指定的任何设置。我的目标是使两个图表背景都透明。我尝试过backgroundColor:null，backgroundColor:'Transparent'，backgroundColor:'rgba(255,255,255,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]
            ]
        }]
    });

Answer 1

你做错了，chart2不是一个选项。改变这个:

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

对此:

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

参见updated jsFiddle