0

次の例は、jsfiddle の次のリンクにあります。 http://jsfiddle.net/KWqU2/2/

両方のハイチャートには、チャート オプション構成内で設定された backgroundColor があります。

問題は、backgroundColor プロパティを何に設定しても、2 番目のチャートのデフォルトがデフォルトになり、指定した設定が無視されることです。私の目標は、両方のグラフの背景を透明にすることです。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]
            ]
        }]
    });
4

1 に答える 1

2

あなたはそれを間違っています、それchart2はオプションではありません。これを変える ：

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

これに：

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

更新された jsFiddleを参照してください

于 2013-10-05T14:14:52.730 に答える