Question

以下示例位于jsfiddle，其中包含以下链接。 http://jsfiddle.net/KWqU2/2/

两个Highcharts都在图表选项配置中设置了backgroundColor。

问题似乎是无论我将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

多图表的Highcharts backgroundColor仅适用于一个图表

1 个答案: